Getting started with Gantt

Gantt chart visualizes the work breakdown structure for projects. It illustrates the time intervals of the project tasks and their dependencies. The breakdown of the project is described in tasks which are listed on the vertical axis where the duration of the tasks is offset against the horizontal axis.

Find demos of Gantt charts here to quickly get an overview of Highcharts Gantt’s capabilities.

Get started

Load Highcharts Gantt as a standalone library when there is no need for other Highcharts dependencies.

Example of loading Highcharts Gantt into a webpage


<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

Load Highcharts Gantt as a module when a project needs both Highcharts and Gantt loaded at the same time. Place the script tag or import statement after loading the main library, Highcharts or Highcharts Stock.

Example of loading both libraries in a webpage


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>

For alternative loading and bundling patterns, for UMD, AMD, CommonJS or ES6 modules, find more information here . Highcharts Gantt follows the same patterns as described for Highcharts.

Constructor

Run the ganttChart constructor for initializing a Gantt chart visualization. The constructor takes two required parameters and a third optional parameter.


Highcharts.ganttChart('container', {
    title: { .. },
    // other configuration options
}, myCallback);

id: The id of the HTML element used for rendering the chart.
config: An object with configuration options for defining the Gantt chart.
callback: Optional, a callback for getting a handle on the chart, after rendering.

Simple example

See below the simple live example of a Gantt chart