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

README.md

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