https://github.com/reactjs/react-chartjs

common react charting components using chart.js
https://github.com/reactjs/react-chartjs

Last synced: 4 months ago
JSON representation

common react charting components using chart.js

• Host: GitHub
• URL: https://github.com/reactjs/react-chartjs
• Owner: reactjs
• License: mit
• Archived: true
• Created: 2014-12-26T23:19:20.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2022-02-07T10:04:02.000Z (almost 3 years ago)
• Last Synced: 2024-05-23T09:22:14.324Z (8 months ago)
• Language: JavaScript
• Size: 130 KB
• Stars: 2,930
• Watchers: 56
• Forks: 302
• Open Issues: 73
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-chartjs - Common react charting components using chart.js. (Uncategorized / Uncategorized)
• awesome-canvas - react-chartjs - common react charting components using chart.js   (Libraries / Charts Libraries)
• awesome-list - react-chartjs - Common react charting components using chart.js. (Demos / Chart)
• awesome-react-components - react-chartjs - Common react charting components using chart.js. (UI Components / Chart)

README

        
react-chartjs

============

rich interactive react charting components using [chart.js](http://www.chartjs.org/) including

* Line chart

* Bar chart

* Radar chart

* Polar area chart

* Pie chart

* Doughnut chart

[view chart examples](http://reactjs.github.io/react-chartjs/index.html)

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](https://www.npmjs.com/package/chart.js) and [React](https://www.npmjs.com/package/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 

  }

});

```

* ```data``` represents the chart data (see [chart.js](https://github.com/chartjs/Chart.js/tree/v1.1.1/docs) for details)

* ```options``` represents the chart options (see [chart.js](https://github.com/chartjs/Chart.js/tree/v1.1.1/docs) 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 ``````

Chart References

----------------

The ```canvas``` element can be retrieved using ```getCanvas``` and the ```chartjs object``` can be retrieved using ```getChart```.