How to update data on zoom in apexchart

Question

I am trying to find a way in the apex chart. By which if user zoom on the year graph then the user should be able to get month data when they zoom on month data this should show the day data.

But I am not able to figure out if its possible in apex chart or not.

This is how my graph look like right now.

import React from "react";
import ReactApexChart from "react-apexcharts";

interface StackedGraphProps {}
type SeriesType = {
  name: string;
  data: number[];
};
interface StackedGraphState {
  series: SeriesType[];
  options: any;
}

class StackedBarGraph extends React.Component<
  StackedGraphProps,
  StackedGraphState
> {
  constructor(props: any) {
    super(props);

    this.state = {
      series: [
        {
          name: "Marine Sprite",
          data: [44, 55, 41, 37, 22, 43, 21],
        },
        {
          name: "Striking Calf",
          data: [53, 32, 33, 52, 13, 43, 32],
        },
        {
          name: "Tank Picture",
          data: [12, 17, 11, 9, 15, 11, 20],
        },
      ],
      options: {
        chart: {
          events: {
            zoomed: function (chartContext: any, { xaxis, yaxis }) {
              console.log("xAxis", xaxis, yaxis);
            },
            selection: function (chartContext: any, { xaxis, yaxis }) {
              console.log("Selecton", xaxis, yaxis);
            },
            dataPointSelection: (
              event: any,
              chartContext: any,
              config: any
            ) => {
              console.log("datapoint", chartContext, config);
            },
          },
          zoom: {
            enabled: true,
            type: "x",
            autoScaleYaxis: false,
            // zoomedArea: {
            //   fill: {
            //     color: "#90CAF9",
            //     opacity: 0.4,
            //   },
            //   stroke: {
            //     color: "#0D47A1",
            //     opacity: 0.4,
            //     width: 1,
            //   },
            // },
          },
          type: "bar",
          height: 350,
          stacked: true,
        },
        toolbar: {
          show: true,
        },
        plotOptions: {
          bar: {
            horizontal: false,
          },
        },
        stroke: {
          width: 1,
          colors: ["#fff"],
        },
        grid: {
          row: {
            colors: ["#fff", "#f2f2f2f2"],
          },
        },
        title: {
          text: "",
        },
        xaxis: {
          tickPlacement: "on",
          categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
          labels: {
            formatter: function (val: any) {
              return val + "K";
            },
          },
        },
        yaxis: {
          title: {
            text: undefined,
          },
        },
        tooltip: {
          y: {
            formatter: function (val: any) {
              return val + "K";
            },
          },
        },
        fill: {
          opacity: 1,
        },
        legend: {
          position: "top",
          horizontalAlign: "left",
          offsetX: 40,
        },
      },
    };
  }

  render() {
    return (
      <div id="chart">
        <ReactApexChart
          zoomEnabled={true}
          options={this.state.options}
          series={this.state.series}
          type="bar"
          height={350}
        />
      </div>
    );
  }
}

export default StackedBarGraph;