Go to file

Sambo Chea 07c8c35456 updated the example projects and updated to the examples		2020-10-15 09:33:20 +07:00
dist	first init react chart js library	2020-10-15 08:43:27 +07:00
examples/line-chart-example	updated the example projects and updated to the examples	2020-10-15 09:33:20 +07:00
src	add example for react line chart example	2020-10-15 09:01:55 +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	first init react chart js library	2020-10-15 08:43:27 +07:00
.npmignore	first init react chart js library	2020-10-15 08:43:27 +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	add example for react line chart example	2020-10-15 09:01:55 +07:00
README.md	updated the example projects and updated to the examples	2020-10-15 09:33:20 +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 add @cubetiq/react-chart-js

OR using Yarn

yarn add @cubetiq/react-chart-js

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