Starting from 1000-2000 tasks, depending on what configuration options and plugins you use, there may be delays in rendering the Gantt chart on the page.
There are the following ways to solve this problem:
The Smart Rendering technique allows considerably enhancing the speed of data rendering, while working with big amounts of data. In this mode only the tasks and links visible on the screen at the moment are being rendered.
Starting from v6.2, the smart rendering is enabled by default, as it is included in the core dhtmlxgantt.js file. Thus, you don't need to include the dhtmlxgantt_smart_rendering.js file on the page to make smart rendering work.
If you connect the dhtmlxgantt_smart_rendering.js file, which is from the old version, it will override the improvements of the new built-in smart_rendering extension.
If you need to disable the smart rendering mode, you can set the corresponding configuration parameter to false:
gantt.config.smart_rendering = false;
The process of usual smart rendering is to check whether the position of a gantt element falls within the area visible on the screen and define whether to display it or not.
However, the smart rendering of custom layers enables only the vertical Smart rendering by default. It means, that the custom layers will be rendered when the row of the specified task is in the view port. But the exact coordinates of a custom element can't be calculated and the whole row of the task in the timeline is taken as its position.
You may refer to the addTaskLayer article to learn how to enable the horizontal Smart rendering for custom layers.
This functionality is available only in PRO version
If you use a big date range in your project, you may also want to enable the static_background parameter in addition to smart rendering:
Back to top
gantt.config.static_background = true;