Objectives Of The Comparison
The Objective of this comparison is to find the fastest library for plotting a defined number of data points.
Charts are a required component in almost every project now, and there are dozens of libraries to choose from. It's tough to find the best one for your use case.
I'm writing this blog to share the research I've done to find the best library for performance in my own use case.
I am going to compare the top three libraries from my filtered list of ten. I have already set some requirements for my client that helped me narrow it down to these three. (I will try to cover that on another blog.)
Parameters Of The Test
We will be plotting two graphs using each library one by one, where one graph will contain 1K data points and the other will contain 5K data points and then we will see how much time the browser takes to render that component!
We had one more use in the project whereywe need to plot two area graphs and one line graphs simultaneously. So, for this testing we will follow the same approach, which means effectively we will be plotting two graphs for 3K and 15K data points.
Device Configuration
This testing in performed on the Devicewith following configuration:
Processor: i5 12th Generation
Ram: 16 GB
Storage Type: SSD
Recharts
Example with 1000 data points
Example with 5000 data points
Apex Charts
Example with 1000 data points
Example with 5000 data points
HighCharts
Example with 1000 data points
Example with 5000 data points
I was surprised to see that HighCharts is performing so well, so I decided to test it with 1L data points. I expected it to struggle with 3L data points because of the three graphs (Area, Area, Line), but it actually performed quite well. It's almost equal to what we see in other libraries with 10K data points. See the screenshot below:
100000 data points
Recap of everything
Other Factors
Here are a few other key factors which I usually check out before picking out any library that I will be using for my projects -
NPM Monthly Downloads
As we can see that in the graph above, recharts and highcharts have the most number of downloads in the previous year.
Github Stars
Health Score
Recharts | ApexCharts | HighCharts
References:-
https://snyk.io/advisor/npm-package/recharts
https://snyk.io/advisor/npm-package/apexcharts
https://snyk.io/advisor/npm-package/highcharts
https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries
Conclusion
The best library for me and my current requirement is HighCharts. However, it's important to remember that what works best for me might not work best for you. ApexCharts & ReCharts have a lot of features that HighCharts doesn't offer, which could be an advantage for some people.
We at Hashtrust have an expert team of ReactJS developers and if you want to add charts to your web project then you can contact us. Our experienced team of developers will give you the best assistance as per your needs.
