Performance Based React Charts Comparison ApexCharts Vs ReCharts Vs HighCharts

Performance Based React Charts Comparison – ApexCharts V/s ReCharts V/s HighCharts 

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 Device with 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

ChartsRender Time (1000 points)Render Time (5000 points)Render Time(100000 points)
ReCharts2677ms5398ms
ApexCharts1865ms5284ms
HighCharts565ms723ms5405ms
Render Time Comparison

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.

About the author :

Manthan Gour

A Frontend developer at Hashtrust who loves his freedom and is inclined towards sports, music, and chess!

Leave a Comment

Your email address will not be published.