@jhonnold/react-chart.js

React Components for the popular Chart.js libary

Install

npm install --save @jhonnold/react-chart.js

Getting Started

import { BarChart } from '@jhonnold/react-chart.js';

<BarChart data={...} />

General

Direct examples of each chart type can be found in examples.

Live Examples: Github Pages

Components

import ChartComponent, {
    LineChart,
    BarChart,
    HorizontalBarChart,
    RadarChart,
    DoughnutChart,
    PolarAreaChart,
    BubbleChart,
    PieChart,
    ScatterChart,
} from '@jhonnold/react-chart.js';

Configure

Props

const {
    id,         // string
    height,     // number
    width,      // number
    redraw,     // boolean
    type,       // string (required only on ChartComponent)
    data,       // chart.js dataObj or fn that returns dataObj (required)
    options,    // chart.js options
    plugins,    // chart.js plugins
} = props;

id

Type: string Default: undefined

ID attribute applied to the rendered canvas

height

Type: number Default: 150

Height attribute applied to the rendered canvas

width

Type: number Default: 300

Width attribute applied to the rendered canvas

redraw

Type: boolean Default: false

If true, will tear down and redraw chart on all updates

type

Type: 'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'

Chart.js chart type (required only on ChartComponent)

data (required)

Type: ((canvas: HTMLCanvasElement | null): Chart.ChartData) | Chart.ChartData

The data object that is passed into the Chart.js chart (more info).

This can also be a function, that receives a canvas element and returns the data object.

const data = canvas => {
    const ctx = canvas.getContext('2d');
    const g = ctx.createLinearGradient(...);

    // ...

    return {
        datasets: [{
            backgroundColor: g,
            //. ..
        }],
        // ...
    };
}

options

Type: Chart.ChartOptions

The options object that is passed into the Chart.js chart (more info)

plugins

Type: Chart.PluginServiceRegistrationOptions[]

The plugins array that is passed into the Chart.js chart (more info)

License

MIT © jhonnold