common react charting components using chart.js
Clone or download
Latest commit a0f0f8f Jan 14, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Build dist files on publish Jan 5, 2018
lib Revert ES6 change that uses classes, and replace createElement with c… Jan 5, 2018
.gitignore Update x-labels without full redraw Apr 25, 2015
LICENSE Initial commit Dec 26, 2014 Fix text cut off in documentation link Jan 14, 2018
index.js Allow custom chart types. Mar 20, 2015
package-lock.json 1.2.0 Jan 5, 2018
package.json 1.2.0 Jan 5, 2018 v0.6.0 Mar 26, 2015
webpack.config.js Update dist Dec 22, 2015


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


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

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.