Zooming

Enabling default zoom settings

To enable default zooming, set the zoom property to true.

Example:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

export default function ExampleDefaultZoom() {
  return <Gantt zoom={true} tasks={data.tasks} />;
}

Configuring zoom settings

To configure zoom settings, change the required parameters of the zoom property.

Example:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

const dayStyle = a => {
  const day = a.getDay() === 5 || a.getDay() === 6;
  return day ? "sday" : "";
};

const hoursTemplate = (a, b) => {
  return `${format(a, "%H:%i")} - ${format(b, "%H:%i")}`;
};

const zoomConfig = {
  level: 3,
  levels: [
    {
      minCellWidth: 200,
      maxCellWidth: 400,
      scales: [{ unit: "year", step: 1, format: "%Y" }],
    },
    {
      minCellWidth: 150,
      maxCellWidth: 400,
      scales: [
        { unit: "year", step: 1, format: "%Y" },
        { unit: "quarter", step: 1, format: "%Q" },
      ],
    },
    {
      minCellWidth: 250,
      maxCellWidth: 350,
      scales: [
        { unit: "quarter", step: 1, format: "%Q" },
        { unit: "month", step: 1, format: "%F %Y" },
      ],
    },
    {
      minCellWidth: 100,
      scales: [
        { unit: "month", step: 1, format: "%F %Y" },
        { unit: "week", step: 1, format: "'week' %W" },
      ],
    },
    {
      maxCellWidth: 200,
      scales: [
        { unit: "month", step: 1, format: "%F %Y" },
        { unit: "day", step: 1, format: "%j", css: dayStyle },
      ],
    },
    {
      minCellWidth: 25,
      maxCellWidth: 100,
      scales: [
        { unit: "day", step: 1, format: ""%M %j"", css: dayStyle },
        { unit: "hour", step: 6, format: hoursTemplate },
      ],
    },
    {
      maxCellWidth: 120,
      scales: [
        { unit: "day", step: 1, format: ""%M %j"", css: dayStyle },
        { unit: "hour", step: 1, format: "%H:%i" },
      ],
    },
  ],
};

export default function ExampleCustomZoom() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      zoom={zoomConfig}
    />
  );
}

---

Related samples:

• Zoom
• Custom zoom