Skip to main content

expand-scale

Description​

Fires when the scale does not fill all free space in the chart and it's required to expand scale boundaries

Usage​

"expand-scale": ({ 
  minWidth: number,
  date?:Date,
  offset: number
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • minWidth - (required) the minimum width of the scale in pixels
  • date - (optional) 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​

If the scale is less than than the viewport, the example below will output the minWidth value.

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

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

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("expand-scale", (ev) => {
        console.log("Current scale minWidth", ev.minWidth);
      });
    }
  }, [apiRef.current]);

  return <Gantt apiRef={apiRef} tasks={data.tasks} links={data.links} scales={data.scales} />;
};

export default MyGanttComponent;

Related articles: How to access Gantt API