Skip to main content

Resizer

You can expand or collapse the grid and chart areas manually using the resizing handle between them.

Resizer

Setting the initial grid width​

Use the gridWidth property to set the initial width of the grid area in pixels (default: 440):

<Gantt tasks={data.tasks} scales={data.scales} gridWidth={300} />

Setting the grid width programmatically​

Use the resize-grid action via api.exec() to change the grid width from code:

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

  const data = getData();

  function init(api) {
    api.exec("resize-grid", { width: 300 });
  }
</script>

<Gantt {init} tasks={data.tasks} scales={data.scales} />

Listening to resize events​

To react when the user drags the resizer handle, listen to the resize-grid action:

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

  const data = getData();

  function init(api) {
    api.on("resize-grid", ({ width }) => {
      console.log("Grid width changed to:", width);
    });
  }
</script>

<Gantt {init} tasks={data.tasks} scales={data.scales} />

To react to chart container size changes, listen to the resize-chart action:

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

  const data = getData();

  function init(api) {
    api.on("resize-chart", ({ width, height }) => {
      console.log("Chart resized:", width, height);
    });
  }
</script>

<Gantt {init} tasks={data.tasks} links={data.links} scales={data.scales} />

Related articles: