1. Install the plugin in your project.
2. Pick the “Gantt Chart” element from the toolbar and drag it onto the page.

Open the element's properties and fill in the required fields with data. Type from DB. Required. Source of first field Type. Required. Task ID. Field of Task. Required. Task Label. Field of Task. Required. Task Start Date. Field of Task. Required. Task Duration. Field of Task. Required. Task Progress. Field of Task. Required. Task Type. Field of Task. Required. Task Collapsed. Field of Task. Optional. Task User. Field of Task. Optional. Task Parent. Field of Task. Optional. Task Depend On. Field of Task. Optional. Colors for Project, Milestone, and Task types. (checkbox) Initialize Gantt Chart with visible/invisible tasklist

The type should have the required fields:

1. (REQUIRED) ID, it can be custom id, or bubble unique id, type ‘text’.
2. (REQUIRED) Label, type ‘text’.
3. (REQUIRED) Start Date, type ‘bubble date’.
4. (REQUIRED) Duration, type ‘number’ it should be indicated as seconds. 86400 seconds represents a full 24h day.
5. (REQUIRED) Progress, type ‘number’ it should be a number between 0-100, (representation of progress in percents).
6. (REQUIRED) Type, type ‘text’, it can be ‘task’, ‘project’, or ‘milestone’.
7. (OPTIONAL) Collapsed, type ‘yes/no’, it will show task expanded or collapsed.
8. (OPTIONAL) User, type ‘text’. This field can be written in DB like a simple name ‘John Doe’ or it can be written like an HTML link, ex: ‘<a href=”url_here”>John Doe</a>’.
9. (OPTIONAL) Parent, type ‘text’. This field should be another task id.
10. (OPTIONAL) Dependent, type ‘list of text’. This should be a list of dependent task IDs.

An example of data from Bubble Task type:

An example of Task type in Bubble:

1. Project Color - color for tasks that are marked like ‘project’.
2. Milestone Color - color for tasks that are marked like ‘milestone’.
3. Task Color - color for tasks that are marked like ‘task’. All three options are optional. By default project color is #F95C4C, milestone color is #0287D0 and task color is #8E44AD.
4. Show Task List - will render a Gantt chart with the attached tasklist or not.

1. Scale X - will zoom the chart on X-axis, minimum value 2, maximum value 24.
2. Scale Y - will zoom the chart on Y-axis, with a minimum value of 7, and a maximum value of 100.
3. Center Chart - will center the chart on the current date/time.