zoom/pan slider for multi column, group label column chart to virtualize/render only parts for performance and readability?

[ysk3a]

Hi,

1. Does apexchart have an option to show a xaxis zoom/pan slider as shown in https://echarts.apache.org/examples/en/editor.html?c=mix-zoom-on-value at the bottom of the chart?

2. Maybe a feature where default shows a certain amount of group label + columns and automatically show a horizontal scrollbar to scroll to other group label + columns?

I'm using apexchart in angular with ng-apexchart and specifically need the https://apexcharts.com/javascript-chart-demos/column-charts/column-with-group-label/ combined with grouping per between tick like https://apexcharts.com/javascript-chart-demos/column-charts/basic/ but I also require that zoom/pan slider since I'll be dealing with multiple sets of large data sets.

Apexchart seems to be rendering every charts with all the column which seems to be the cause of the freezing of my app. So i hoped apexchart has some zoom functionality to render only a part of the data and 'virtualize' the other data if the end user scrolled/panned/zoomed.

The closest i think is https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/ but there is only an example using line chart and not a column chart with group columns + group labels.
There is also https://www.npmjs.com/package/apexcharts#a-little-more-than-the-basic but no source code to see how it is done but is this possible with group labels?

There seemed to be various issus related such as #1195 and has, what appears to be, a desirable gif behavior of zoom resize columns to not be a thin sliver column for large data set but tickplacement to 'on' removes group labels completely and was mentioned only timeline xaxis works not category or group label.

https://www.npmjs.com/package/apexcharts#interactivity was also an option i thought was an ok alternative to apply to xaxis group label but I found that #333 , apexchart removed it.

There are also quite of few discussions that are related or similar but most are unanswered/partially answered.

Another 'last hope' approach was maybe calling update series in zoom event like https://stackoverflow.com/questions/69828906/apexchart-column-resize-on-zoom and hopefully there is some data in the callback related to the xaxis and group to 'clip' the series but there isn't any exec function in ng-apexchart so i couldn't fully test is this approach would work.

I guess thats my third question. in ng-apexchart how to call the chart methods like https://apexcharts.com/docs/methods/#exec or updateseries etc. since there is nothing like var chart = new ApexCharts(el, options); chart.updateSeries(...); in any of the angular examples?

[rosco54]

Here's an example html file for a column chart (based on the brush-chart sample in the apexcharts code distro). May rely on current version 3.46.0 of apexcharts.

`

<title>Column brush chart</title>

<link href="apexcharts.js/samples/assets/styles.css" rel="stylesheet" />

<style>
  
#wrapper {
  padding-top: 20px;
  padding-left: 10px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
  max-width: 650px;
  margin: 35px auto;
}

#chart-line {
  position: relative;
  margin-top: 0px;
}
  
</style>

<script>
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
    )
</script>


<script src="apexcharts.js/dist/apexcharts.js"></script>

<script>
    var data = [1.45, 5.42, 5.9, -0.42, -12.6,
                -18.1, -18.2, -14.16, -11.1,
                -6.09, 0.34, 3.88, 13.07,
                5.8, 2, 7.37, 8.1, 13.57,
                15.75, 17.1, 19.8, -27.03,
                -54.4, -47.2, -43.3, -18.6, -
                48.6, -41.1, -39.6, -37.6,
                -29.4, -21.4, -2.4];
                
    var categories = [
            '2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
            '2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
            '2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
            '2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
            '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
            '2013-07-01', '2013-08-01', '2013-09-01'
          ];


    var options = {
      series: [{
      name: 'Cash Flow',
      data: data
      }],
        chart: {
          id: 'chart-bar',
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            colors: {
              ranges: [{
                from: -100,
                to: -46,
                color: '#F15B46'
              }, {
                from: -45,
                to: 0,
                color: '#FEB019'
              }]
            },
            columnWidth: '80%',
          }
        },
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          type: 'datetime',
          categories: categories,
          labels: {
            rotate: -90
          }
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart-bar"), options);
    chart.render();
  
     var options = {
      series: [{
        name: 'Cash Flow',
        data: data
      }],
      chart: {
        id: 'chart-line',
        type: 'line',
        height: 80,
        dropShadow: {
          enabled: true,
          enabledOnSeries: [1]
        },
        brush: {
          enabled: true,
          target: 'chart-bar'
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('01 July 2012').getTime(),
            max: new Date('31 Dec 2012').getTime()
          }
        },
      },
      yaxis: {
        stepSize: 5,
        forceNiceScale: true
      },
      xaxis: {
        type: 'datetime',
        categories: categories,
      }
    };

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

</script>

`