https://github.com/jhonnold/react-chart.js
React Components for the popular chart library Chart.js
https://github.com/jhonnold/react-chart.js
chartjs react react-chartjs react-components
Last synced: 5 months ago
JSON representation
React Components for the popular chart library Chart.js
- Host: GitHub
- URL: https://github.com/jhonnold/react-chart.js
- Owner: jhonnold
- Created: 2020-04-21T21:55:39.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:14:47.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T02:22:08.003Z (11 months ago)
- Topics: chartjs, react, react-chartjs, react-components
- Language: JavaScript
- Homepage: https://jhonnold.github.io/react-chart.js/#/
- Size: 3.54 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @jhonnold/react-chart.js
[](https://www.npmjs.com/package/@jhonnold/react-chart.js)
[](https://npm-stat.com/charts.html?package=@jhonnold/react-chart.js&from=2020-01-01)
[](https://travis-ci.org/jhonnold/react-chart.js)
[](http://opensource.org/licenses/MIT)
> React Components for the popular [Chart.js](https://github.com/chartjs/Chart.js) libary
## Install
```bash
npm install --save @jhonnold/react-chart.js chart.js
```
###### chart.js is a peer-dependency and must be installed alongside this library
## Getting Started
```tsx
import { BarChart } from '@jhonnold/react-chart.js';
```
## General
Direct examples of each chart type can be found in `examples`.
Live Examples: [Github Pages](https://jhonnold.github.io/react-chart.js/)
### Components
```tsx
import ChartComponent, {
LineChart,
BarChart,
HorizontalBarChart,
RadarChart,
DoughnutChart,
PolarAreaChart,
BubbleChart,
PieChart,
ScatterChart,
} from '@jhonnold/react-chart.js';
```
## Configure
### Props
```tsx
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](https://www.chartjs.org/docs/latest/getting-started/)).
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,
//. ..
}],
// ...
};
}
```
#### options
Type: `Chart.ChartOptions`
The options object that is passed into the Chart.js chart ([more info](https://www.chartjs.org/docs/latest/general/options.html))
#### plugins
Type: `Chart.PluginServiceRegistrationOptions[]`
The plugins array that is passed into the Chart.js chart ([more info](https://www.chartjs.org/docs/latest/developers/plugins.html))
## License
MIT © [jhonnold](https://github.com/jhonnold)