React component for Chart.js
Clone or download
Latest commit c3a35f5 Jan 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix example build Jan 20, 2017
lib update dependencies Jan 2, 2018
src Add `scatter` to the list of valid chart types Dec 28, 2017
.babelrc chartjs-react 0.1.0 Mar 18, 2016
.gitignore v1.0.0 Jun 20, 2016
README.md update docs Apr 6, 2017
package.json update dependencies Jan 2, 2018
webpack.config.js fix example build Jan 20, 2017
yarn.lock update version to v1.2.0 && add yarn.lock Nov 17, 2017

README.md

react-chartjs2

React component for Chart.js

Installation

npm install react-chartjs2 --save

Demo

Live demo: http://houjiazong.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