I wanted to use reset zooming button of apexcharts in my project. I wanted to only reset graph after user pressing all button but the page is reloading. Is there any way to remove action of reloading? I don't have much information about apexcharts. I added below example apexchart graph and javascript code. Can you give me idea? Thank you in advance..

 $(document).ready(function() {
        var options = {
            chart: {
                height: 400,
                type: 'area',
                toolbar: {
                    show: false,
                },
                events: {
                    selection: function(chart, e) {
                        console.log(new Date(e.xaxis.min) )
                    }
                },
                stacked: true
            },

            colors: ['#ef742a','#0f2648'],
            dataLabels: {
                enabled: false
            },

            series: [               
              {
                name: '{{ $treeItem['device_title'] }}',
                type:'area',
                data: []
              },
            ],

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.6,
                    opacityTo: 0.2,
                    gradientToColors:"#1c3d89",
                }
            },
            
                  labels: [],

            legend: {
                position: 'top',
                horizontalAlign: 'right',
                show: true,
            },
            grid: {
                yaxis: {
                    lines: {
                        show: false,
                    }
                },
                padding: {
                    top: 20,
                    right: 0,
                    bottom: 0,
                    left: 10
                },
            },
            stroke: {
                show: true,
                curve: 'smooth',
                width: 2,
            },
        }

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

        chart.render();
        function generateDayWiseTimeSeries(baseval, count, yrange) {
            var i = 0;
            var series = [];
            while (i < count) {
                var x = baseval;
                var y = Math.floor(Math.random() * (yrange.max - yrange.min   1))   yrange.min;

                series.push([x, y]);
                baseval  = 86400000;
                i  ;
            }

            console.log(series);

            return series;
        }

        var resetCssClasses = function (activeEl) {
            var els = document.querySelectorAll("button");
            Array.prototype.forEach.call(els, function (el) {
                el.classList.remove('active');
            });

            activeEl.target.classList.add('active')
        }

        document.querySelector("#chart_all").addEventListener('click', function (e) {
            resetCssClasses(e)
            chart.updateOptions({
                xaxis: {
                    min: undefined,
                    max: undefined,
                }
            })
        })

    });

CodePudding user response：

It looks like the issue is related to the page reloading after the reset zooming button is pressed. To prevent the page from reloading, you can remove the location.reload() function or use preventDefault() method on the event that triggers the reload. Alternatively, you can use ajax to update the chart's data without reloading the page.

How to use AJAX to update the chart's data:

document.querySelector("#chart_all").addEventListener('click', function (e) {
  e.preventDefault(); // prevent the page from reloading
  resetCssClasses(e);
  
  // use AJAX to retrieve new data
  $.ajax({
    type: "GET",
    url: "path/to/data",
    success: function(data) {
      chart.updateSeries([{
        data: data
      }]);
    }
  });
});

When the reset zooming button is clicked, the preventDefault() method is used to prevent the page from reloading. Then, an AJAX request is made to a specified URL to retrieve new data. Once the data is successfully retrieved, the updateSeries() method is used to update the chart with the new data.

Replace path/to/data with the actual path to the data you would like to retrieve via ajax, also you may need to add error handling, and you should also check the data format that your endpoint returns and match it with the format that ApexCharts accepts.