react-chartjs
Version:
react charting components using the chartjs lib
47 lines (37 loc) • 1.6 kB
Markdown
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 <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
```
* ```data``` represents the chart data (see [chart.js](http://www.chartjs.org/) for details)
* ```options``` represents the chart options (see [chart.js](http://www.chartjs.org/) 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 ```<LineChart data={this.state.chartData} redraw />```
Chart References
----------------
The ```canvas``` element can be retrieved using ```getCanvas``` and the ```chartjs object``` can be retrieved using ```getChart```.