Skip to main content

zoom-scale

Description​

Fires when zooming a chart

Usage​

"zoom-scale": ({
    dir: number;
    date: Date;
    offset?: number;
}) => boolean | void;

Parameters​

The callback of the zoom-scale action can take an object with the following parameters:

  • dir - (required) direction of zooming: 1 (zoom in) or -1 (zoom out)
  • date - (required) the date applied as the center of the zoomed area. The date format should be of the one supported by date-fns
  • offset - (optional) the cursor location in the x-axis on a page in pixels
info

For handling the actions you can use the Event Bus methods

Example​

import { useEffect, useRef } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const GanttComponent = () => {
  const data = getData();
  const apiRef = useRef(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("zoom-scale", (ev) => {
        console.log("The chart was zoomed");
      });
    }
  }, [apiRef.current]);

  return (
    <Gantt
      apiRef={apiRef}
      tasks={data.tasks}
      //other settings
    />
  );
};

export default GanttComponent;

Related articles: How to access Gantt API