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.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
rumble-charts
React components for building composable and flexible charts -
react-sigmajs
Lightweight React 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 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
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 chart.js@^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
.