How to enable scroll over left part of gantt chart in Echarts?

Question

Scrolling on the left side of the Gantt chart in Echarts does not work I can’t figure out where and how to turn it on

I looked for options but didn't find any I read the documentation but didn't find anything useful Already tried this and that Here is link

Answer 1

import { ECharts } from 'echarts';
import { useEffect } from 'react';

import { getDataZoom } from '@opm/shared/echarts';

export const useScrollEChart = (
  echarts: ECharts | undefined,
  dataZoomId: string,
) => {
  useEffect(() => {
    if (!echarts) return;
    let startPercent: number;
    let endPercent: number;

    const mouseWheelHandler = (e: WheelEvent) => {
      const dataZoom = getDataZoom(echarts, [dataZoomId]);

      startPercent = dataZoom[0].start;
      endPercent = dataZoom[0].end;

      if (e.deltaY > 0 && endPercent < 100) {
        const increment = Math.min(4, 100 - endPercent);
        startPercent += increment;
        endPercent += increment;
      }
      if (e.deltaY < 0 && startPercent > 0) {
        const decrement = Math.min(4, startPercent);
        startPercent -= decrement;
        endPercent -= decrement;
      }

      // set the values for dataZoom cause its only the way to scroll diagram

      echarts.dispatchAction({
        type: 'dataZoom',
        batch: [
          {
            dataZoomId,
            start: startPercent,
            end: endPercent,
          },
        ],
      });
    };

    echarts.getDom()?.addEventListener('wheel', mouseWheelHandler);

    return () => {
      echarts.getDom()?.removeEventListener('wheel', mouseWheelHandler);
    };
  }, [echarts, dataZoomId]);
};