Performance Based React Charts Comparison

• Author:Hashtrust Technologies Pvt Ltd
• Published On:Jul 27, 2023
• Category:Comparison

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:

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.