Gantt interactivity lag with large task sets when autosize is true

Gantt
1

I am experiencing significant performance issues in DHTMLX Gantt when working with large datasets.

Specifically, when the number of tasks exceeds ~1000 and gantt.config.autosize = true is enabled, the overall interactivity of the Gantt chart degrades noticeably.

Observed behaviour:

I am experiencing a laggy behaviour when:

  • Expanding and collapsing parent/project tasks
  • Resizing columns
  • Zooming in and out

Reproducible example:

I have created a minimal example demonstrating the issue here

Question:

  • Is this a known limitation when using autosize with large datasets?
  • Are there recommended optimizations or alternative configurations to improve performance in this scenario?

Any guidance or best practices for handling large-scale Gantt charts would be appreciated.

2

Hello @Mokgadi_Mabapa,

This is an expected behaviour. When the autosize config is enabled, Gantt stretches its container to fit the sizes of all task rows, and it renders the HTML elements of all tasks. This can affect performance.

Regarding performance tweaks and best practices for handling large datasets in Gantt:

Gantt performance depends on the number of loaded tasks and the enabled features. We have the following article with the performance comparison depending on the enabled features:

You can also test it manually by using the snippets in the article and the following sample:

Also, by default, DHTMLX Gantt uses smart rendering, which ensures that only visible tasks and links within the current viewport are rendered. This helps to improve performance with large datasets.

For more information on ways to improve performance, please check this article:

Here is a sample with 30000 tasks and 3671 links loaded within ~1 sec:

https://docs.dhtmlx.com/gantt/samples/?sample=‘02_extensions/13_smart_rendering.html’&filter=‘’

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

3

Hi Valeria,

Is there a plan to improve this performance issue when auto sizing is true and I have lot of tasks?

Thanks

4

Hello @Mokgadi_Mabapa,

The main performance limitation of autosize mode is that, by design, it disables Gantt’s primary performance optimization: smart rendering, also known as virtualized rendering.

By default, Gantt renders only the rows currently visible in the viewport. This allows it to keep thousands of tasks in memory while rendering only tens or a few hundred rows at a time.

When gantt.config.autosize is enabled, internal vertical scrolling is disabled because the Gantt container expands to fit all tasks. Without an internal viewport, smart rendering cannot be used, so Gantt has to render all visible tasks during each full repaint.

Several major operations, including expanding or collapsing branches, resizing columns, and changing the zoom level, currently require a full repaint. As a result, their performance can degrade noticeably when autosize is used with a large dataset.

At present, there is no configuration-level optimization that would make autosize mode significantly faster. A substantial improvement would require changes to the rendering engine, and I cannot provide a timeframe for such changes.

Could you please describe your layout and explain why you need to use autosize mode? Depending on your requirements, we may be able to suggest an alternative setup that keeps internal scrolling enabled and allows smart rendering to work.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

5

Hi Valeria,

I am showing the Gantt in a report alongside other widgets. My problem is that if I don’t use auto sizing then I must have a predetermined height of the container div.

6

Hello @Mokgadi_Mabapa,

Thanks for the details.

There’s currently no way to keep a large number of tasks all rendered at once and stay fast. Operations like expanding/collapsing branches, resizing columns, or zooming trigger a full repaint, and with autosize every task lives in the DOM, so that repaint is heavy. That’s the source of the lag.

But if you only need the fully-expanded chart for the export to PDF, then you can keep autosize off, and switch it on only before export, then off again:

gantt.config.autosize = "y";
gantt.render();
// ...generate the file / print...
gantt.config.autosize = false;
gantt.render();

You can also give the container a relative height and let Gantt scroll internally when rows overflow. That’s exactly what re-enables smart rendering, which keeps only the tasks in the viewport in the DOM and improves performance:

<!-- vh, %, or a flex child all work - no fixed pixel value needed -->
<div id="gantt_here" style="height: 80vh;"></div>

gantt.config.autosize = false;
gantt.init("gantt_here");

(If you use %, make sure the parent elements have a height; vh or a flex layout avoids that caveat.)

A note on the autosize value: if you’re currently using “xy” or “x”, the most expensive part is the timeline expanding to your full date range horizontally. If your widgets are stacked vertically (not placed left/right of the Gantt), you can drop horizontal growth and use autosize: “y”. Note that autosize: true already means “y”, so this only helps if you’re on “xy”/“x” today.

I’ve also forwarded your request to our development team to research what can be improved for this scenario. If there’s any update, I’ll let you know here.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

1 Like