Go to file
Sambo Chea 24d3fe60f4
Updated examples and package
2021-11-11 16:31:59 +07:00
examples/line-chart-example Updated examples and package 2021-11-11 16:31:59 +07:00
src Updated to 1.1.9 2021-11-11 16:30:02 +07:00
test updated the package and tests 2020-10-15 09:47:37 +07:00
.eslintignore first init react chart js library 2020-10-15 08:43:27 +07:00
.eslintrc.js first init react chart js library 2020-10-15 08:43:27 +07:00
.gitignore remove the dists and update to new version 1.1.4 2020-10-15 10:21:45 +07:00
.npmignore Updated chartjs 2021-11-11 16:18:18 +07:00
.prettierignore first init react chart js library 2020-10-15 08:43:27 +07:00
.prettierrc first init react chart js library 2020-10-15 08:43:27 +07:00
babel.config.js first init react chart js library 2020-10-15 08:43:27 +07:00
jest.config.js first init react chart js library 2020-10-15 08:43:27 +07:00
package.json Updated examples and package 2021-11-11 16:31:59 +07:00
README.md updated the link for demo 2020-10-15 12:21:03 +07:00
tsconfig.json first init react chart js library 2020-10-15 08:43:27 +07:00

React Chart.js Component

Install

Using NPM

npm install @cubetiq/react-chart-js

OR using Yarn

yarn add @cubetiq/react-chart-js

View a Demo

Line Chart Example

import React from 'react';
import { ReactChartJs } from '@cubetiq/react-chart-js';

function LineChartExample(props) {
    return (
        <ReactChartJs
            chartConfig={{
                type: 'line',
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Monthly Payments',
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true,
                    },
                },
                data: {
                    datasets: [
                        {
                            label: 'Part-time',
                            data: [5, 10, 30],
                            fill: false,
                            borderColor: '#ff6384',
                        },
                        {
                            label: 'Full-time',
                            data: [10, 15, 45],
                            fill: false,
                            borderColor: '#36a2eb',
                        },
                    ],
                    labels: ['Jan', 'Feb', 'Mar'],
                },
            }}
        />
    );
}

export default LineChartExample;

Contributors

Project's repository: React Countdown