Skip to main content

How to access Gantt API

You can use either of the two ways below to get access to the Gantt API:

  • apply the init handler function with the api as the parameter
  • apply the bind Svelte feature to bind to the api object

Apply the init handler​

You can access Gantt API using the init handler function that takes api as the parameter.

The example below shows how to use the init function and output to the console the current zoom level by listening to the zoom-scale action with the help of the api.on() method and getting the state of the zoom level via the api.getState() method.

Example:

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

    const data = getData();

    function init(api) {
        api.on("zoom-scale", () => {
            console.log("The current zoom level is", api.getState().zoom);
        });
    }
</script>

<h4>Point over Gantt chart, then hold Ctrl and use mouse wheel to zoom</h4>

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

Bind to api​

You can access Gantt API via the api gateway object. You should use the bind Svelte feature to bind to the api object.

In the example below we get access to the Gantt api via bind:api and pass the api variable with the kept Gantt api to the Toolbar:

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

    const data = getData();

    let api;

</script>

<Toolbar {api} />

<Gantt bind:api tasks={data.tasks} />

api methods​

See each method description in the next sections.