README.md

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 react-chartjs-2 --save

You must also include chart.js and React as dependencies.

npm install --save chart.js@^1.1.1 react react-dom

Example Usage

import { Line } from "react-chartjs-2"

class MyComponent extends React.Component {
  render() {
    return <Line 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.