A Gantt chart is a tool used to schedule projects or show resources (e.g., equipment or employees) over periods of time. Project tasks or periods are visualized as horizontal bars, their width representing the duration.

AnyGantt allows creating two types of Gannt charts - Project and Resource. They display different timeline elements, but share most settings.

Both chart types are defined as instances of the anychart.charts.Gantt class. To create them, use the anychart.ganttProject and anychart.ganttResource() constructors.

This is how the Project chart and Resource chart are structured:

Project Gantt Chart

Resource Gantt Chart


The first four articles explain how to create Project and Resource charts:

To learn about data and date & time formats, see these articles:

Here the basic settings are listed - appearance, row height, navigation, etc.:

The following sections explain how to adjust the main parts of the Gantt chart:

There are also advanced settings available:


AnyGantt requires adding two modules - Core and Gantt:

<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-gantt.min.js" type="text/javascript"></script>


Below you can find the list of classes used to configure the Gantt chart and its parts.

Gantt chart:

Data grid:


Timeline elements: