react-chartjs-2

React wrapper for Chart.js

Getting started

$3

``bash
npm install --save react-chartjs-2 chart.js

or

yarn add react-chartjs-2 chart.js
`

###### We recommend using chart.js ^3.0.0

$3

`jsx
import { Doughnut } from 'react-chartjs-2';


`

Examples

Live: reactchartjs.github.io/react-chartjs-2

See these examples for more information

Configure

$3

`js
id?: string;
className?: string;
height?: number;
width?: number;
redraw?: boolean;
type: Chart.ChartType
data: Chart.ChartData | (canvas: HTMLCanvasElement | null) => Chart.ChartData;
options?: Chart.ChartOptions;
plugins?: Chart.PluginServiceRegistrationOptions[];
getDatasetAtEvent?: (dataset: Array<{}>, event: React.MouseEvent) => void;
getElementAtEvent?: (element: [{}], event: React.MouseEvent) => void;
getElementsAtEvent?: (elements: Array<{}>, event: React.MouseEvent) => void;
`

#### id

Type string
Default: undefined

ID attribute applied to the rendered canvas

#### className

Type string
Default: undefined

class 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: Chart.ChartData | (canvas: HTMLCanvasElement | null) => 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.

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

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

#### 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)

#### getDatasetAtEvent

Type: (dataset: Array<{}>, event: React.MouseEvent) => void
Default: undefined

Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event

#### getElementAtEvent

Type: (element: [{}], event: React.MouseEvent) => void
Default: undefined

Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event

#### getElementsAtEvent

Type: (elements: Array<{}>, event: React.MouseEvent) => void
Default: undefined

Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event

FAQ

$3

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false

`tsx
data={data}
width={100}
height={50}
options={{ maintainAspectRatio: false }}
/>
`

$3

The Chart.js instance can be accessed by placing a ref to the element as:

`tsx
const App => {
const ref = useRef();

return ;
};
`

$3

The canvas node and hence context can be accessed within the data function.
This approach is useful when you want to keep your components pure.

`tsx
render() {
const data = (canvas) => {
const ctx = canvas.getContext('2d')
const gradient = ctx.createLinearGradient(0,0,100,0);

return {
backgroundColor: gradient
// ...the rest
}
}

return ;
}
`

Additional Information

$3

Chart.js defaults can be set by importing the defaults object:

`tsx
import { defaults } from 'react-chartjs-2';

// Disable animating charts by default.
defaults.animation = false;
`

If you want to bulk set properties, try using the lodash.merge function. This function will do a deep recursive merge preserving previously set values that you don't want to update.

``tsx
import { defaults } from 'react-chartjs-2';
import merge from 'lodash.merge';

merge(defaults, {
animation: false,
line: {
borderColor: '#F85F73',
}
});
` -->