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
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.
Do checkout CanvasJS charts which offers 30+ chart types, simple API(least learning curve) and high performance.
canvasjs.com/react-charts/
still vote to Highcharts.js
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.