react-chartjs

react charting components using the chartjs lib

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-chartjs
2,930731.2.06 years ago9 years agoMinified + gzip package size for react-chartjs in KB

Readme

react-chartjs
rich interactive react charting components using chart.js including
  • Line chart
  • Bar chart
  • Radar chart
  • Polar area chart
  • Pie chart
  • Doughnut chart

view chart examples

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 and 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 for details)
  • ``options`` represents the chart options (see chart.js 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``.