Available only in PRO Edition

Multiple Charts on a Page

This functionality is available in the Gantt PRO edition (Enterprise and Ultimate licenses) only.

Basically, dhtmlxGantt is a static object and the default instance of it continually exists on the page. You may access it via the global gantt object at any time. But you can also create a new gantt object if needed.

To create a new instance of dhtmlxGantt, use the Gantt.getGanttInstance() method:

// beware, "Gantt" in the command goes with the capital letter
[instanceName] = Gantt.getGanttInstance();

And then configure your new instance, initialize it and populate with data, as usual.

Let's take a simple example: 2 Gantt charts, one under another:

function init() {
    gantt1 = Gantt.getGanttInstance();
    gantt2 = Gantt.getGanttInstance();
<body onload="init();">
    <div id="gantt_here" class="dhx_cal_container" ...>
    <div id="gantt_here_2" class="dhx_cal_container" ...>

Integration with dhtmlxLayout

A good way to place multiple Gantt charts on the page is using dhtmlxLayout. It not only provides a beautiful frame, but also ensures correct interacting with other elements on the page and acting according to the page size changes.

Note that dhtmlxLayout is a separate product, not a part of the dhtmlxGantt library. If you would like to use dhtmlxLayout in your application, you should purchase the license. Please check the licensing options.

To attach a dhtmlxGantt instance to a layout cell, use the attachGantt() method.

Note, attaching dhtmlxGantt to a cell automatically initializes it. So, configure dhtmlxGantt instance before placing it into the layout.

function init() {
    var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
    gantt1 = Gantt.getGanttInstance();
    gantt1.config.min_column_width = 50;
    gantt1.config.scale_height = 90;
    dhxLayout.cells("a").attachGantt(null, null, gantt);     gantt1.parse(tasksA);
    gantt2 = Gantt.getGanttInstance();
    gantt2.config.date_grid = "%Y-%m-%d %H:%i";
    gantt2.config.xml_date = "%Y-%m-%d %H:%i:%s";
    dhxLayout.cells("b").attachGantt(null, null, gantt2);    gantt2.parse(tasksB);

Destructor of Gantt and DataProcessor instances

Starting from version 5.1, the dhtmlxGantt object has a destructor that can be used to dispose unnecessary instances of the Gantt.

The destructor of the gantt instance can be used as follows:

var gantt = Gantt.getGanttInstance();

The destructor will implement the following tasks:

  • clear the data loaded into a gantt instance
  • destroy the dataProcessor (if it is attached to the gantt)
  • detach the gantt from DOM
  • detach all DOM events attached via the gantt.event() method

Note, that the destructor won't destroy the data stores created by the gantt.createDatastore() method. You have to destroy them manually, like this:

// creating a datastore
var resourcesStore = gantt.createDatastore({
    initItem: function(item){
        item.id = item.key || gantt.uid();
        return item;
// destroying the datastore later

Using destructor with Angular

Here is an example of using the destructor to dispose a gantt instance while using the Angular framework:

@Component({selector: 'app-gantt', template: `...`})
class MyGanttComponent implements OnDestroy {
  ngOnInit() {
     this.$gantt = Gantt.getGanttInstance();
     // configure and init
  ngOnDestroy() {
     this.$gantt = null;

Detaching the dataProcessor

Calling the destructor of data processor will clear the dataprocessor instance and detach it from the gantt. For example:

var gantt = Gantt.getGanttInstance();
var dp = new gantt.dataProcessor("url");
// destroys data processor and detaches it from the gantt

If you use a package that does not allow creating multiple instances of the gantt object (GPL or Commercial editions), calling the gantt destructor will make the gantt inaccessible until page reload.

Back to top