Looking for a charting Library for JS and React allowing for Zoom

Question

I am currently rebuilding a previously staic-html+Native js web-page with React. I am therefor looking into different libraries to create a line-chart using Javascript.

The chart was previously created using google-charts but seeing, that my colleagues want to use as few Google tools as possible, I started looking for alternatives.

I have already built, pretty much everything using Chart.js and react-chartjs-2 but it turns out, that we inevitably need the zooming feature in order to graphically examine slight deviations in the data in the graph, despite there usually being 3000+ entries in a graph that is approx 1000x300px.

I came across dygraphs and react-dygraphs and though it looks promissing, the last commit is approximately 3 years ago.

Does anyone have experience, as to whether it still works with more current react versions? Is there a (free/open-source) alternative to google-charts, possibly one that I am not aware of?

Libraries I know and excluded are: chart.js, D3, canvasjs

Answer 1

Can you try the Syncfusion JavaScript Charts library? It has 30+ chart types with interaction support such as Zoom, pan, trackball, tooltip etc.

Sample link https://ej2.syncfusion.com/demos/#/material/chart/zooming.html

It also has built-in support for frameworks - Angular, React, Vue

Answer 2

I ended up up settling for the React Timeseries Charts because:

• they are superbly documented, with a LOT of examples
• free to use (under BSD-license),
• offer all the features I am likely to need in the forseeable future (read "ever need")
• and use a timeseries format, which is straightforward and also easy-to-use with python which facilitates implementing the back-end functionality