Zooming

Enabling default zoom settings

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

Example:

<script>
    import { getData } from "./common/data";
    import { Gantt } from "@wx/svelte-gantt";

    const data = getData();

</script>

<Gantt zoom={true} tasks={data.tasks} />

Configuring zoom settings

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

Example:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt";
  
  const data = getData();

  const zoomConfig = {
    level: 3,
    levels: [
        {
            minCellWidth: 200,
            maxCellWidth: 400,
            scales: [{ unit: "year", step: 1, format: "yyyy" }],
        },
        {
            minCellWidth: 150,
            maxCellWidth: 400,
            scales: [
                { unit: "year", step: 1, format: "yyyy" },
                { unit: "quarter", step: 1, format: "QQQQ" },
            ],
        },
        {
            minCellWidth: 250,
            maxCellWidth: 350,
            scales: [
                { unit: "quarter", step: 1, format: "QQQQ" },
                { unit: "month", step: 1, format: "MMMM yyy" },
            ],
        },
        {
            minCellWidth: 100,
            scales: [
                { unit: "month", step: 1, format: "MMMM yyy" },
                { unit: "week", step: 1, format: "'week' w" },
            ],
        },
        {
            maxCellWidth: 200,
            scales: [
                { unit: "month", step: 1, format: "MMMM yyy" },
                { unit: "day", step: 1, format: "d", css: dayStyle },
            ],
        },
        {
            minCellWidth: 25,
            maxCellWidth: 100,
            scales: [
                { unit: "day", step: 1, format: "MMM d", css: dayStyle },
                { unit: "hour", step: 6, format: hoursTemplate },
            ],
        },
        {
            maxCellWidth: 120,
            scales: [
                { unit: "day", step: 1, format: "MMM d", css: dayStyle },
                { unit: "hour", step: 1, format: "HH:mm" },
            ],
        },
    ],
};
</script>

<Gantt
 zoom={zoomConfig}
 tasks={data.tasks}
 links={data.links} />