HeatMap | When i click to dataPointSelection and change xaxis lenght resize work wrong

[MikhailLyvak]

My code
https://youtu.be/myQr8TGF0pY

Problem here i think because on click to dataPoint i change data from year to month pobably from 31 day in xaxis to 24 hours and somehow it place it wrong and looks like xaxis lavels are not connected with rectangles inside heatmap

import { ApexOptions } from 'apexcharts';

import { HeatMapChartData } from './HeatMapChartCart';

export const heatMapChartOptions = (
  chartData: HeatMapChartData,
  setSelectedMonth: (month: string) => void,
  selectedMonth: string | null,
  customTooltip?: (options: any) => any,
): ApexOptions => {
  const chartOptions: ApexOptions = {
    series: chartData.seriesList,
    chart: {
      height: 350,
      width: '100%',
      type: 'heatmap',
      toolbar: {
        tools: {
          selection: false,
          zoom: false,
          zoomin: false,
          zoomout: false,
        },
      },
      events: {
        dataPointSelection: function (event, chartContext, config) {
          const seriesIndex = config.seriesIndex;
          console.log(seriesIndex);
          setSelectedMonth(String(seriesIndex + 1));
          console.log(selectedMonth);
        },
      },
    },
    plotOptions: {
      heatmap: {
        enableShades: false,
        radius: 1,
        useFillColorAsStroke: true,
        colorScale: {
          ranges: chartData.ranges,
        },
        distributed: true,
      },
    },
    dataLabels: {
      enabled: true,
      formatter: function (val: number) {
        return val < 0 ? '' : val;
      },
    },
    xaxis: {
      labels: {
        show: true,
      },
      tickPlacement: 'between',
      tickAmount: 'dataPoints',
      title: {
        text: 'Months of year',
      },
    },
    yaxis: {
      title: {
        text: 'Days of the month',
        style: {
          fontSize: '14px',
          fontWeight: 'bold',
        },
      },
    },
    stroke: {
      width: 0.2,
    },
    title: {
      text: 'HeatMap Chart of mice activity',
    },
    tooltip: {
      enabled: true,
      custom: customTooltip,
    },
  };

  return chartOptions;
};