https://github.com/jhudson8/react-chartjs
common react charting components using chart.js
https://github.com/jhudson8/react-chartjs
Last synced: 9 months ago
JSON representation
common react charting components using chart.js
- Host: GitHub
- URL: https://github.com/jhudson8/react-chartjs
- Owner: reactjs
- License: mit
- Archived: true
- Created: 2014-12-26T23:19:20.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T10:04:02.000Z (almost 4 years ago)
- Last Synced: 2025-04-12T09:48:07.067Z (9 months ago)
- Language: JavaScript
- Size: 130 KB
- Stars: 2,928
- Watchers: 56
- Forks: 300
- Open Issues: 73
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react - react-chartjs - Common react charting components using chart.js
README
react-chartjs
============
rich interactive react charting components using [chart.js](http://www.chartjs.org/) including
* Line chart
* Bar chart
* Radar chart
* Polar area chart
* Pie chart
* Doughnut chart
[view chart examples](http://reactjs.github.io/react-chartjs/index.html)
Installation
------------
This is a CommonJS component only (to be used with something like Webpack or Browserify)
```
npm install --save react-chartjs
```
You must also include [chart.js](https://www.npmjs.com/package/chart.js) and [React](https://www.npmjs.com/package/react) as dependencies.
```
npm install --save chart.js@^1.1.1 react react-dom
```
Example Usage
-------------
```javascript
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return
}
});
```
* ```data``` represents the chart data (see [chart.js](https://github.com/chartjs/Chart.js/tree/v1.1.1/docs) for details)
* ```options``` represents the chart options (see [chart.js](https://github.com/chartjs/Chart.js/tree/v1.1.1/docs) for details)
* all other parameters will be passed through to the ```canvas``` element
* if data passed into the component changes, points will animate between values using chart.js' ```.update()```. If you want the chart destroyed and redrawn on every change, pass in ```redraw``` as a prop. For example ``````
Chart References
----------------
The ```canvas``` element can be retrieved using ```getCanvas``` and the ```chartjs object``` can be retrieved using ```getChart```.