ApexCharts null points have bad performance

[pacocom]

Bug report

I create a demo with 8640 points, when I use null points DOM performace is very very slow (DOM is blocked). In group of charts 2, null points are a 99% approximately.

Codepen

https://codepen.io/pacocom/pen/vYLVMNp

Explanation

• What is the behavior you expect? Good performance
• What is happening instead? Bad performance
• What error message are you getting? No error message

[matiastucci]

I'm having the exact same issue. I have a chart with "only" 1k items where 70% of the points are null and it takes a few seconds to zoom. It blocks the DOM too.

[leeoniya]

@pacocom

i've done a lot of benchmarking of charting libs for data-dense line charts (including Apex) [1].

all svg-based charts have steep performance cliffs after a few hundred datapoints (even before null-related issues). you might consider a canvas-based chart for this use-case; the performance difference can be several orders of magnitude once you get into hundreds of thousands or millions of datapoints. here's a quick/incomplete demo of your codepen using uPlot: https://jsfiddle.net/dc1a2Lhb/

[1] https://github.com/leeoniya/uPlot#performance

[junedchhipa]

@leeoniya Nice work there, thanks for doing a benchmark test for ApexCharts!

@pacocom I see the problem. One solution can be to interpolate the null values and create a single path instead of showing several dots disconnected. It has been requested in #146, #1252, and many other issues. Marking this as high-priority.

[pacocom]

Thank @leeoniya but in my current project is mandatory use ApexCharts (I don't want to connect null points, null points should be disconnected) in this moment. In the past I used HighCharts Stock too and with it the timeline series had a perfect performance.

Please @junedchhipa / ApexCharts fix it.

Very Thanks.

[leeoniya]

out of curiosity, is there a reason why you're not simply filtering out the null datapoints?

[pacocom]

@leeoniya I need blank points... I need null points. Null point meaning API is not called in that moment, other case (API call) is API call latency. I used Highcharts Stock previously, but I am needing similar to https://www.highcharts.com/demo/stock/basic-line now, I found https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/ similar and FREE.

Thanks.

[matiastucci]

In my case the points are price predictions. For some dates I don't have predictions so it must be null. If I use 0 that would mean that the prediction was 0 and that's not correct.

[leeoniya]

hmm, perhaps i have a different mental model for how this stuff works outside of Apex? i do understand the need for null vs 0 values. if you have some periods without data, then it makes sense to show the gaps, e.g. [1].

what i don't understand is how the majority of your dataset can consist of "no data" - how is this any different than simply omitting those points? for instance, if i have 10 datapoints in the past 30 days, why would i fill the rest of the dataset with a null values for every other second in those 30 days with "no data"?

i guess what i'm asking is how a 99% null-filled chart would look different than a chart that just contains the datapoints?

[1] https://leeoniya.github.io/uPlot/demos/missing-data.html

[matiastucci]

In my case I'm showing 2 series together:

• one with the real price (all the items are complete)
• one with the user's prediction (this one could be mostly empty)

[leeoniya]

@matiastucci yeah, that's a valid case for libs which require x-aligned datasets (like uPlot), but Apex does not appear to need this and both x & y can be arbitrary per series: https://apexcharts.com/docs/series/#timeline-series

[matiastucci]

Right. I'll look into uPlot and see how easy is to migrate at least this particular chart. Thanks!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[LuccaPassos]

I'm facing this exact problem. I have a brush chart targeting a timeline line chart with null values and the lack of performance is very noticible. And I only have 300 points on the chart. I need the null values to show empty intervals between data and as far as i know there hasn't been a solution yet.