Work with large data in ApexCharts

[mitrofanov-danil]

I have a problem with large data set. When I get from the backend an array in which 42,000 elements are stored and I need to display it on the line chart, but unfortunately when I try to render the chart, the web page freezes. Tell me how to solve this problem? P.S. I turned off the animation and also deleted the markers.

[junedchhipa]

Please create a codepen so I can easily reproduce.

[fpugliesedotcom]

@junedchhipa Please find a codepen to reproduce the behaviour that @xDANCHOx says:

https://codepen.io/fpug/pen/BaQYvGy?editors=1010

I'm experiencing the same problem when I have between 30,000 to 40,000 data points.

In codepen example I only added 10,000 data points.

You can change the number of data points by changing the datapoints variable:

var i;
var data = []; // Chart data
var categories = []; // Chart categories
var datapoints = 10000; // Change number of data points here

for (i = 0; i < datapoints; i++) {
  data.push(Math.floor(Math.random() * 100));
  categories.push(i);
} 

var options = {
          series: [{
            name: "Value",
            data: data
        }],
          chart: {
          height: 350,
          type: 'line',
          animations: {
            enabled: false
          },
          zoom: {
                enabled: true,
                type: 'xy',
                autoScaleYaxis: false,
                zoomedArea: {
                    fill: {
                        color: '#90CAF9',
                        opacity: 0.4
                    },
                    stroke: {
                        color: '#0D47A1',
                        opacity: 0.4,
                        width: 1
                    }
                }
            }
        },
        markers: {
            size: 0
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth',
          width: 2
        },
        title: {
          text: 'Large Data Performance',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: categories
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

[RuNpiXelruN]

Any update on this?

[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.

[sumitpanchbhai1998]

Hey can anyone get solution on this , Im aslo facing some issue

[sumitpanchbhai1998]

I have a problem with large data set. When I get from the backend an array in which 42,000 elements are stored and I need to display it on the line chart, but unfortunately when I try to render the chart, the web page freezes. Tell me how to solve this problem? P.S. I turned off the animation and also deleted the markers.

[elementalTIMING]

Have the same issue

[VaidehiShrivastava]

I am having a scatter plot where I need to show 10k points but the chart is facing performance issues. Please suggest a solution for the same.

[hilljaycie14]

Facing similar issue with bar chart and ~35k points

[sumitpanchbhai1998]

Hii it can work properly you have to first create apexchart with all the needed property and then insert/inject the data It will work, for me I can plot million of datapoints

On Fri, 5 May 2023, 02:15 Jaycie Hill, @.***> wrote:

Facing similar issue with bar chart and ~35k points

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-1535388208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNDZ5TAGTDD3PEERVQDXEQIMZANCNFSM4OIMGWQA . You are receiving this because you commented.Message ID: @.***>

[karenwanga]

Hii it can work properly you have to first create apexchart with all the needed property and then insert/inject the data It will work, for me I can plot million of datapoints … On Fri, 5 May 2023, 02:15 Jaycie Hill, @.> wrote: Facing similar issue with bar chart and ~35k points — Reply to this email directly, view it on GitHub <#1706 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNDZ5TAGTDD3PEERVQDXEQIMZANCNFSM4OIMGWQA . You are receiving this because you commented.Message ID: @.>

Hi @sumitpanchbhai1998 , Could you please explain more clearly about how to work with large data in ApexCharts? Do you use appendData() method to insert the large data?

  var chart = new ApexCharts(el, options);
  chart.appendData([{
    data: [32, 44, 31, 41, 22]
  }, {
    data: [12, 11, 32, 44, 5]
  }])

I use this method to insert data, but the web page still freezes.

[danwid]

up. any updates on this?

[sumitpanchbhai1998]

Hi I'm aggregating data points

On Mon, 11 Sept 2023, 07:12 danwid, @.***> wrote:

up. any updates on this?

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-1713031812, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNFSLPMMKBALJCWAJN3XZZUAHANCNFSM4OIMGWQA . You are receiving this because you were mentioned.Message ID: @.***>

[danwid]

Hi
I'm aggregating data points

Thanks for responding @sumitpanchbhai1998 . Can you give sample code on how do you this?

[Brandon-Ballard25]

I have been having this same issue does anyone have a fix?

[sumitpanchbhai1998]

could you aggregate the data and then plot it ?

On Sun, Feb 11, 2024 at 10:26 AM Brandon-Ballard25 @.***> wrote:

I have been having this same issue does anyone have a fix?

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-1937425926, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNDN4LC3OBS3KHPYQG3YTBFRNAVCNFSM4OIMGWQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJTG42DENJZGI3A . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks and Regards,

Sumit Panchbhai +91-7218876672 Triniti Advanced Software Labs. https://www.linkedin.com/in/sumit-panchbhai-%F0%9F%87%AE%F0%9F%87%B3-404b531b6?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BC2jM0QcYRF6oTHKoc6Vdng%3D%3D

[Brandon-Ballard25]

could you aggregate the data and then plot it ? … On Sun, Feb 11, 2024 at 10:26 AM Brandon-Ballard25 @.> wrote: I have been having this same issue does anyone have a fix? — Reply to this email directly, view it on GitHub <#1706 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNDN4LC3OBS3KHPYQG3YTBFRNAVCNFSM4OIMGWQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJTG42DENJZGI3A . You are receiving this because you were mentioned.Message ID: @.> -- Thanks and Regards, Sumit Panchbhai +91-7218876672 Triniti Advanced Software Labs. https://www.linkedin.com/in/sumit-panchbhai-%F0%9F%87%AE%F0%9F%87%B3-404b531b6?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BC2jM0QcYRF6oTHKoc6Vdng%3D%3D

If i do that is possible to have greater detail when the user zooms in?

[mateushion]

Hi @sumitpanchbhai1998, can you describe a example?

[sumitpanchbhai1998]

Again you can do in two steps, first just prepare an template for the apex chart pass the data in batches(append) / or just aggregate the data and pass it

Note : In my case I want to show the graph so I just aggregated the values

On Thu, Feb 15, 2024 at 7:09 PM mateushion @.***> wrote:

Hi @sumitpanchbhai1998 https://github.com/sumitpanchbhai1998, can you describe a example?

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-1946117014, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNDRPPSJABIXM357UH3YTYF2ZAVCNFSM4OIMGWQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJUGYYTCNZQGE2A . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks and Regards,

Sumit Panchbhai +91-7218876672 Triniti Advanced Software Labs. https://www.linkedin.com/in/sumit-panchbhai-%F0%9F%87%AE%F0%9F%87%B3-404b531b6?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BC2jM0QcYRF6oTHKoc6Vdng%3D%3D

[VaidehiShrivastava]

Hello @sumitpanchbhai1998 , could you please share a CodeSandbox link demonstrating your approach? It would be greatly appreciated if the demonstration includes plotting at least 20k to 30k data points.

[sumitpanchbhai1998]

As of now I don't have any

On Fri, Feb 16, 2024 at 10:52 AM Vaidehi Shrivastava < @.***> wrote:

Hello @sumitpanchbhai1998 https://github.com/sumitpanchbhai1998 , could you please share a CodeSandbox link demonstrating your approach? It would be greatly appreciated if the demonstration includes plotting at least 20k to 30k data points.

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-1947776998, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNAXP4SM7DE2356QSH3YT3UHRAVCNFSM4OIMGWQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJUG43TONRZHE4A . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks and Regards,

Sumit Panchbhai +91-7218876672 Triniti Advanced Software Labs. https://www.linkedin.com/in/sumit-panchbhai-%F0%9F%87%AE%F0%9F%87%B3-404b531b6?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BC2jM0QcYRF6oTHKoc6Vdng%3D%3D

[thinksaydo]

I think the problem is that ApexCharts only supports SVG rendering, which is limited by DOM size and memory. To allow points in the tens of thousands or even millions, ApexCharts would need to allow rendering to a Canvas tag (like Highcharts and Apache ECharts do). From what I can tell, it doesn't support this currently. This has been brought up before it seems: https://github.com/apexcharts/apexcharts.js/issues/550

[sumitpanchbhai1998]

Ok, thanks for the clarification.

On Mon, Mar 18, 2024 at 6:03 PM Collin Schneider @.***> wrote:

I think the problem is that ApexCharts only supports SVG rendering, which is limited by DOM size and memory. To allow points in the tens of thousands or even millions, ApexCharts would need to allow rendering to a Canvas tag (like Highcharts and Apache ECharts do). From what I can tell, it doesn't support this currently. This has been brought up before it seems: #550 https://github.com/apexcharts/apexcharts.js/issues/550

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/1706#issuecomment-2003792491, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6CLNFJDUWAPX63H6SUZWDYY3NKHAVCNFSM4OIMGWQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBQGM3TSMRUHEYQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks and Regards,

Sumit Panchbhai +91-7218876672 Triniti Advanced Software Labs. https://www.linkedin.com/in/sumit-panchbhai-%F0%9F%87%AE%F0%9F%87%B3-404b531b6?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BC2jM0QcYRF6oTHKoc6Vdng%3D%3D

[danwid]

This is kinda misleading then 😓

[capveg-netdebug]

Why is this issue closed? There are a lot of people with the issue and a linked repro. I'm also having this problem and can help diagnose if necessary. FYI: I'm using the Zoomable timeseries feature (https://apexcharts.com/react-chart-demos/line-charts/zoomable-timeseries/) so I'm supposed to be able to put a lot of data in so that people can zoom in and zoom out. The graph library is supposed to handle only rendering the needed data for each zoom level.

[josenoguera-94]

My data was not much but I got the same error. Try set version in the package.json "apexcharts": "3.33.1" and install the package, it worked for me, the later versions did not work for me. Good luck.

[MuhammadZainEjaz]

How I solved my exact same issue? I am using "apexcharts": "3.49.1", "react-apexcharts": "^1.4.1" in a Reactjs project. Make sure the chart is not conditionally rendered. Draw a chart with empty arrays at first and then update the arrays and let the chart re-render. It will work fine. If there is no data and you want to hide the chart then make the width and height 0 instead of removing the chart out of DOM.

[aline-matos]

For me, the problem occurs when I use the legend to hide/show items on the yaxis when there are more than 2000 points. It takes more than 10 seconds to hide an item on the y-axis. I've tried several approaches without success. It's frustrating.

Does anyone know why the "show: false" option for series doesn't work?