Performance: Ways to Increase

Common techniques

Starting from 200 tasks, there may be delays in rendering the Gantt chart on the page.

There are the following ways to solve this problem:

  1. To disable the rendering of single cells and leave just rendering of rows (set the show_task_cells option to 'false')
  2. To set the background image for the timeline area instead of rendering the actual lines (set the static_background option to 'true') (PRO functionality)
  3. To enable the dynamic loading (set the branch_loading option to 'true')
  4. To increase the scale's step (set the unit property of the scales option to "month" or "year")
  5. To decrease the range of displayable dates (use the start_date and end_date options)
  6. To remove progress bars from the tasks (set the show_progress option to 'false')
  7. To enhance the speed of the scale rendering (enable the smart_scales option in case it's disabled)

Related sample:  Performance tweaks

Smart Rendering

The extension is deprecated since v6.2, as it is enabled by default. You don't need to include it additionally.

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.

To enable Smart Rendering, you need to include the ext/dhtmlxgantt_smart_rendering.js extension on the page:

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
   <script src="codebase/ext/dhtmlxgantt_smart_rendering.js"></script>  </head>
<body>
    // your code here
</body>
</html>

Including the extension on the page is enough to activate the mode. If you need to disable the mode, you can set the corresponding configuration parameter to false:

gantt.config.smart_rendering = false;

Related sample:  Working with 30000 tasks

Working with a large date range

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:

gantt.config.static_background = true;

Related sample:  Performance tweaks

Back to top