Problem performance

[LorenRodriguez]

I am working a one a project. I need to simulate the similar chart of 25000 datapoints found on the web: https://apexcharts.com/features/. I have managed to make the chart, but the performance is much lower with 25000 datapoints compared to the chast of the web. Is it possible to achieve that performance?

Thanks

[junedchhipa]

On the features page of ApexCharts - there are certain things which are turned off to increase performance.

1. Animation is disabled
2. Markers size is set to 0

If you have a similar configuration, please create a CodePen so I can look at the config of your chart and suggest some improvements if needed.

PS: SVG charts are generally slower if there are thousands of data-points. The goal of ApexCharts is not to render millions of data-points as that is not achievable with SVG elements easily. WebGL can help if you want to achieve good performance with a lot of data-points (WebGL is not supported in ApexCharts yet)

[LorenRodriguez]

I have disabled Animation and performance is good. Thanks.

[mestaritonttu]

Disabling animations when they give no benefit is for sure a good idea (I prefer never to use them), but I thought I would share what I found in an SVG.js issue: "3.0 version will have much better performance on animation" (3.0 was released in Dec 2018).

[junedchhipa]

@mestaritonttu Thanks for the suggestion. I wanted to upgrade to 3.0, but the final size of ApexCharts became much larger (increased by ~ around 20%) after I tried the upgrade.
Also, I have manually tweaked some code of svg.js to prevent bugs while integrating ApexCharts in various 3rd party libraries.

Nonetheless, I will keep track of SVG.js as that is the core library ApexCharts depends on, and in future, I will upgrade to the latest version after weighing pros and cons.

[MACscr]

What is a reasonable number of data points to use as a limit?

[leeoniya]

you may want to consider https://github.com/leeoniya/uPlot

[mestaritonttu]

you may want to consider https://github.com/leeoniya/uPlot

Nah, it uses Canvas instead of SVG, so I doubt users of ApexCharts would consider it.

[leeoniya]

for users who insist on SVG, then obviously not. but those looking to render 25,000 data points would be doing themselves a disservice by dismissing libs purely based on technology, since Canvas & WebGL is where the performance is.

anyways, never hurts to be aware of additional options :)

[AliRezaBeigy]

for me, disabling dataLabels help me too much

dataLabels: {
  enabled: false
}

[Mon1k]

I uses this:

1. Disable animation
   animations: {
   enabled: false
   },
2. Disable datalable
   dataLabels: {
   enabled: false
   },
3. Stroke is staight
   stroke: {
   width: 2,
   curve: 'straight'
   },
4. The strongest acceleration replace xaxis type "category" on "datetime"
   before:
   xaxis: {
   type: 'category'
   after
   xaxis: {
   type: 'datetime'

[sayinmehmet47]

Unfortunately since I have more than 25000 data, eventhough I made some configuration in options it doesnt work. So I used highcharts library. It is using Canvas instead of SVG. Take a look at my repo and with live example.

https://github.com/sayinmehmet47/frontend-timeserieschallange

[anuragg33]

any one found solution.I want to show datalabels for some series. but if i enabled the data lable chart taking too much time to load.Also zoom in ,zoom out taking too much time?