react-chartjs alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view react-chartjs alternatives based on common mentions on social networks and blogs.
-
react-chartjs-2
Common react charting components using Chart.js 2.0. -
react-sparklines
Beautiful and expressive Sparklines React component. -
react-google-charts
React-google-charts React component. -
react-timeseries-charts
Declarative timeseries charts. -
chartify
React.js plugin for building animated draggable and customizable charts. -
rumble-charts
React components for building composable and flexible charts. -
react-sigmajs
Lightweight but powerful library for drawing network graphs built on top of SigmaJS. -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines. -
react-micro-bar-chart
React component for micro bar-charts rendered with D3. -
react-muze
React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly) -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Scout APM - Leading-edge performance monitoring starting at $39/month
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of react-chartjs or a related project?
README
react-chartjs
rich interactive react charting components using chart.js including
- Line chart
- Bar chart
- Radar chart
- Polar area chart
- Pie chart
- Doughnut chart
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 and React as dependencies.
npm install --save [email protected]^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 inredraw
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
.