Configuring Gantt

As a complex widget, Gantt consists of many stand-alone Webix views with its own API.
You can redefine inner views and also you can work with the specific Gantt settings.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

url (string) - the URL for loading data
links (boolean) - allows disabling links
preciseTimeUnit (boolean) - used to set precision for task position and width
markers (array, boolean) - an array of markers where each object has the following fields:
- text (string) - marker text
- css (string) - CSS class name
- start_date (object) (object) - marker time. For a current time marker, use now:true instead.
scales (array) - array of scale lines where each object has the following fields:
- unit (string) - scale unit ("hour", "day", "week", "quarter","month", "year")
- step (number) - number of units per cell
- format (string, function) - scale cell format. If it's used as a function it should return a formatted date. If defined as a string it should be a date format like "%Y-%F-%d".
display (string) - defines the current view of Gantt. Requires the resources property to be enabled
isHoliday (funciton) - checks whether a date is a holiday
resources (boolean) - allows loading resources and working with them. false by default
treeWidth - defines the width of the Gantt trees
split (boolean) - allows creating split tasks
resourcesDiagram (boolean) - allows showing resources diagram
resourceCalendars - allows defining separate working hours for resources
projects (boolean) - converts all tasks with children into projects
excludeHolidays (boolean) - allows including only working days in task duration
criticalPath (boolean) - toggles critical path
scaleStart (object) - scale start date. If not defined it will take the lowest start_date value from the dataset
scaleEnd (object) - scale end date. If not defined it will take the highest end_date value from the dataset
scaleCellWidth (number) - width of a cell in a day scale. By default, it is 200 px
locale (string, object) - name of the language in use or an object with language settings
serverUTC (boolean) - if true, allows parsing incoming dates as UTC to a local time zone and saving back to UTC
readonly (boolean) - sets Gantt to a read-only mode. false by default
compact (boolean) - compact mode. false by default
compactWidth (number) - width of the widget, when it is switched to a compact mode. 650 by default
override - a Map of modified inner classes and services used for customization.

webix.ui({
  view: "gantt",
  scales: [
    {
      unit: "month",
      format: "%F, %Y",
    },
    { unit: "day", format: "%d" },
    // other scales
  ],
  url: "https://docs.webix.com/gantt-backend/"
});

Related sample: Gantt: Multiple Scales

Note that if neither data nor scaleStart/scaleEnd is defined the start date will be the current date and the end one - a month later.

Setting scales at runtime

To set scales at runtime you should call the setScales() method of Local service. It takes 6 parameters:

scaleStart (object) - start date;
scaleEnd (object) - end date;
precise (boolean) - flag that defines whether to round task position and width to a smaller unit;
width (number) - width of the smallest cell unit;
height (number) - height of scale cell;
scales (array) - current scales array;

$$("gantt")
  .getService("local")
  .setScales(
    start,
    end,
    true,
    60,
    100,
    [{unit: "day", step: 1, format: "%d"}]
  );

Reactive Configuration

In addition, Gantt has specific reactive properties that store global app state and let developers track its changes:

display (string) - stores the current view of Gantt ("resources" or "tasks")
criticalPath (boolean) - shows whether critical path is enabled
resourcesDiagram (boolean) - shows whether resources diagram is enabled
sort (object, array) - stores sorting state of tasks. Each object contains the following fields:
- id - ID of the column being sorted ("text" for the Title column and "start_date" for the Start date column)
- dir - sorting direction ("asc" or "desc").
edit (boolean) - defines whether the right panel is opened
treeWidth (number) - stores width of the Gantt trees
top (number) - number of pixels Gantt is scrolled vertically
left (number) - number of pixels Gantt is scrolled horizontally
selected (string) - ID of the selected task
readonly (boolean) - denotes whether widget is in a read-only state now.

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view:"gantt", 
    id:"myGantt",
    url: "https://docs.webix.com/gantt-backend/"
});
 
const state = $$("myGantt").getState();
/*
{ 
  display: "resources",
  top: 60, left: 250,
  selected: 1.2, edit: true,
  readonly: false, criticalPath: true,
  resourcesDiagram: false, treeWidth: 400,
  sort: {id: "text", dir: "desc"}
}
*/

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
  view:"gantt",
  on: {
    onInit: app => {
      const state = app.getState();
 
      // creates message with the selected task id
      state.$observe("selected", v =>
        webix.message(`ID of the selected task is: ${v}`);
      );
    },
  }
});

In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.