React component for Chart.js
JavaScript HTML
Latest commit 1a50a30 Jan 20, 2017 @houjiazong houjiazong update peerDependencies
Permalink
Failed to load latest commit information.
example fix example build Jan 20, 2017
lib update chart.js to 2.3.0 Oct 3, 2016
src Added horizontal bar chart Aug 1, 2016
.babelrc chartjs-react 0.1.0 Mar 18, 2016
.gitignore v1.0.0 Jun 20, 2016
README.md update chart.js to 2.3.0 Oct 3, 2016
package.json update peerDependencies Jan 20, 2017
webpack.config.js fix example build Jan 20, 2017

README.md

react-chartjs2

React component for Chart.js

Installation

npm install react-chartjs2 --save

Demo

Live demo: http://topdmc.github.io/react-chartjs2/

Run Example in Dev

npm run example && open ./example/index.html

Example Usage

// using ES6
import RC2 from 'react-chartjs2';
class Main extends Component {
  render() {
    return <RC2 data={chartData} options={chartOptions} type='bar' />;
  }
};
// not using ES6
var RC2 = require('react-chartjs2');
var Main = React.createClass({
  render: function() {
    return <RC2 data={chartData} options={chartOptions} type='bar' />;
  }
});

Get your Chart instance, like

class Main extends Component {
  componentDidMount() {
    this.myChart = this.refs['canvas'].getChart();
    this.myChart.data.datasets[0].points[2] = 50;
    this.myChart.update();
  }
  render() {
    return <RC2 ref='canvas' data={chartData} options={chartOptions} type='bar' />;
  }
};

Chart type

  • Bar
  • Doughnut
  • Line
  • Pie
  • PolarArea
  • Radar