I'm about to start a new project which requires to display a lots of data in charts of many shapes. I've been playing around with some of them:
- D3: it seems very powerful, but the learning curve is quite high.
- react-vis: I liked it at the beginning, but it got difficult to personalize the results.
- recharts: as react-vis, it seemed promising, but I ended up having difficulties.
Maybe I'm very lazy and I just have to spend more time with them...
What's your experience with charts in React?
P.S. And for no reason, here is a GIF of Ron Swanson:
Top comments (7)
I use react-chartjs-2, a React wrapper around Chart.js.
A very straightforward charting library. Very minimal boilerplate.
If you're looking for the customizable options in D3 but want training wheels I recommend NVD3. You can start with the kind of chart you need and move iteratively without starting from scratch. nvd3.org/
Checkout the Essential JS 2 Charts by Syncfusion if you need to load the huge number of data points in it. There are plenty of examples available in the following link.
ej2.syncfusion.com/demos/#/materia...
All the controls are documented well, any developer can understand it easily.
ej2.syncfusion.com/react/documenta...
The whole suite of Syncfusion controls is available for free (commercial applications also) through the community license program if you qualify (less than 1 million US Dollars in revenue). The community license is the full product with no limitations or watermarks.
Note: I work for Syncfusion
Do checkout CanvasJS charts which offers 30+ chart types, simple API(least learning curve) and high performance.
canvasjs.com/react-charts/
Highcharts if you require a lot of customization or very unique design. Still the most powerful library. Unfortunately, requires license. But saves more time than it costs.
I'm often doing weird custom stuff, so it's D3 for me. I think the learning curve is less steep if you only use D3 for coloring/scaling/drawing your SVG shapes and keep state management inside React.
still vote to Highcharts.js