{"id":6394,"date":"2019-07-16T16:55:23","date_gmt":"2019-07-16T13:55:23","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6394"},"modified":"2026-09-15T15:52:41","modified_gmt":"2026-09-15T12:52:41","slug":"dhtmlxgantt-6-2-minor-update-boosting-gantt-chart-performance-zooming-mouse-wheel-much","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-6-2-minor-update-boosting-gantt-chart-performance-zooming-mouse-wheel-much\/","title":{"rendered":"dhtmlxGantt 6.2 Minor Update: Boosting Gantt Chart Performance, Zooming by Mouse Wheel, and Much More"},"content":{"rendered":"

Despite summer being traditionally the holiday season, the development of JavaScript components never stops at DHTMLX. Our dev team delivered an extensive update of the JavaScript Gantt library<\/a> hugely boosting its performance and presenting new features. Now our Gantt together with its resource panel is much more rapid than ever before. We also added such new possibilities as zooming by mouse wheel, creating tasks by drag-n-drop right from the timeline, and expanding split tasks. On top of all, we improved the work of inline editors, cleaned up the API and fixed some smaller issues.<\/p>\n

Try out all the new features in a free 30-day evaluation version ><\/a><\/p>\n

Boosting Gantt Chart Performance<\/h5>\n

The smart rendering extension underwent a major update, which boosted Gantt chart performance, in resource panels in particular. Now the extension is included in the main component by default.<\/p>\n

In practice, it means that:
\n1) You should see a major performance improvement for large charts, especially if you use the resource panel.
\n2) We removed dhtmlxgantt_smart_rendering.js extension from the package, as it became redundant.
\n3) Using static_background<\/strong> config is no longer necessary. Now a default background is rendered with the ability to highlight individual columns and cells of the timeline.<\/p>\n

No specific settings are now needed to address the rendering performance. Everything should work blazingly fast out of the box.<\/p>\n

Surely, there is still room for further improvements, and we’re going to work on accelerating dhtmlxGantt in future updates.<\/p>\n

New Module for Timeline Zooming<\/h5>\n

In v6.2 the zooming feature became much more intuitive and user-friendly both for developers and end users. We introduced a new zooming module<\/a>, which provides a simple API for managing zoom levels of the Gantt chart.<\/p>\n

Firstly, there is an ability to set up the available zoom levels and manage them using simple Zoom In<\/strong> and Zoom Out<\/strong> methods. To define the available zoom levels:<\/p>\n

const<\/span> zoomModule =<\/span> gantt.ext<\/span>.zoom<\/span>;<\/span>
\n
\nzoomModule.init<\/span>(<\/span>{<\/span>
\n    levels:<\/span> [<\/span>
\n      {<\/span>
\n        name:<\/span>"day"<\/span>,<\/span>
\n        scale_height:<\/span> 27<\/span>,<\/span>
\n        min_column_width:<\/span>80<\/span>,<\/span>
\n        scales:<\/span>[<\/span>
\n            {<\/span>unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%d %M"<\/span>}<\/span>
\n        ]<\/span>
\n      }<\/span>,<\/span>
\n      {<\/span>
\n         name:<\/span>"week"<\/span>,<\/span>
\n         scale_height:<\/span> 50<\/span>,<\/span>
\n         min_column_width:<\/span>50<\/span>,<\/span>
\n         scales:<\/span>[<\/span>
\n          {<\/span>unit:<\/span> "week"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> function<\/span> (<\/span>date)<\/span> {<\/span>
\n           var<\/span> dateToStr =<\/span> gantt.date<\/span>.date_to_str<\/span>(<\/span>"%d %M"<\/span>)<\/span>;<\/span>
\n           var<\/span> endDate =<\/span> gantt.date<\/span>.add<\/span>(<\/span>date,<\/span> -<\/span>6<\/span>,<\/span> "day"<\/span>)<\/span>;<\/span>
\n           var<\/span> weekNum =<\/span> gantt.date<\/span>.date_to_str<\/span>(<\/span>"%W"<\/span>)<\/span>(<\/span>date)<\/span>;<\/span>
\n           return<\/span> "#"<\/span> +<\/span> weekNum +<\/span> ", "<\/span> +<\/span> dateToStr(<\/span>date)<\/span> +<\/span> " - "<\/span> +<\/span> dateToStr(<\/span>endDate)<\/span>;<\/span>
\n           }<\/span>}<\/span>,<\/span>
\n           {<\/span>unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%j %D"<\/span>}<\/span>
\n         ]<\/span>
\n       }<\/span>,<\/span>
\n       {<\/span>
\n         name:<\/span>"month"<\/span>,<\/span>
\n         scale_height:<\/span> 50<\/span>,<\/span>
\n         min_column_width:<\/span>120<\/span>,<\/span>
\n         scales:<\/span>[<\/span>
\n            {<\/span>unit:<\/span> "month"<\/span>,<\/span> format:<\/span> "%F, %Y"<\/span>}<\/span>,<\/span>
\n            {<\/span>unit:<\/span> "week"<\/span>,<\/span> format:<\/span> "Week #%W"<\/span>}<\/span>
\n         ]<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span>
\n         name:<\/span>"quarter"<\/span>,<\/span>
\n         height:<\/span> 50<\/span>,<\/span>
\n         min_column_width:<\/span>90<\/span>,<\/span>
\n         scales:<\/span>[<\/span>
\n          {<\/span>unit:<\/span> "month"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%M"<\/span>}<\/span>,<\/span>
\n          {<\/span>
\n           unit:<\/span> "quarter"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> function<\/span> (<\/span>date)<\/span> {<\/span>
\n            var<\/span> dateToStr =<\/span> gantt.date<\/span>.date_to_str<\/span>(<\/span>"%M"<\/span>)<\/span>;<\/span>
\n            var<\/span> endDate =<\/span> gantt.date<\/span>.add<\/span>(<\/span>gantt.date<\/span>.add<\/span>(<\/span>date,<\/span> 3<\/span>,<\/span> "month"<\/span>)<\/span>,<\/span> -<\/span>1<\/span>,<\/span> "day"<\/span>)<\/span>;<\/span>
\n            return<\/span> dateToStr(<\/span>date)<\/span> +<\/span> " - "<\/span> +<\/span> dateToStr(<\/span>endDate)<\/span>;<\/span>
\n           }<\/span>
\n         }<\/span>
\n        ]<\/span>}<\/span>,<\/span>
\n        {<\/span>
\n          name:<\/span>"year"<\/span>,<\/span>
\n          scale_height:<\/span> 50<\/span>,<\/span>
\n          min_column_width:<\/span> 30<\/span>,<\/span>
\n          scales:<\/span>[<\/span>
\n            {<\/span>unit:<\/span> "year"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%Y"<\/span>}<\/span>
\n        ]<\/span>}<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

And to manage zoom levels:<\/p>\n

zoomModule.setLevel<\/span>(<\/span>"year"<\/span>)<\/span>;<\/span>
\n
\n\/\/ or<\/span>
\nzoomModule.zoomIn<\/span>(<\/span>)<\/span>;<\/span>
\n
\n\/\/ or<\/span>
\nzoomModule.zoomOut<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"GanttCheck the sample ><\/a><\/p>\n

Secondly, and most importantly, end users can switch between Gantt chart scales just with the help of the mouse wheel:
\n\"GanttCheck the sample ><\/a><\/p>\n

Expanding and Collapsing Split Tasks [PRO]<\/h5>\n

With v6.2 end users can expand and collapse<\/a> split tasks from the interface of the grid in order to view them as separate subtasks and manage them conveniently. This feature is turned on with the help of a new configuration option open_split_tasks<\/strong>:<\/p>\n

gantt.config<\/span>.open_split_tasks<\/span> =<\/span> true<\/span>;<\/span><\/div><\/div>\n
Improved Drag-n-Drop<\/h5>\n

We are always looking for ways of improving the user experience of dhtmlxGantt. As a part of this endeavor, we introduced a module with an updated drag-n-drop feature. Using this module, you can create new tasks directly in the timeline area of the Gantt chart.<\/p>\n

\"CreatingCheck the sample ><\/a><\/p>\n

Besides, the new module provides an API that you can use to bind drag-n-drop to any behavior you need like selecting multiple tasks in order to move them across the timeline, adding a note to the area in the timeline, creating split tasks, setting time of unscheduled tasks, etc.<\/p>\n

Selecting multiple tasks and moving them:
\n\"MultipleCheck the sample ><\/a><\/p>\n

Creating subtasks of split tasks using drag-n-drop in the timeline area:
\n\"SplitCheck the sample ><\/a><\/p>\n

Inline Editors Update<\/h5>\n

Another UX improvement concerns the work of inline editors. We changed their default behavior following the patterns of popular apps like MS Project. Now changing the start date triggers a task to move, changing the end date modifies the duration of a task, and changing the duration modifies the end date. Learn more in our docs ><\/a><\/p>\n

However, you are free to stick to the old behavior of inline editors with the help of the following configuration option gantt.config.inline_editors_date_processing<\/strong>:<\/p>\n

gantt.config<\/span>.inline_editors_date_processing<\/span> =<\/span> "keepDuration"<\/span>;<\/span><\/div><\/div>\n
Enhanced Setup of the Timeline Scale<\/h5>\n

The update introduced an easier way to set up scales of the timeline<\/a> by reducing the number of configuration options to one gantt.config.scales<\/strong>. Now developers can configure all the available scales using this configuration option alone:<\/p>\n

gantt.config<\/span>.scales<\/span> =<\/span> [<\/span>
\n    {<\/span>unit:<\/span> "month"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%F, %Y"<\/span>}<\/span>,<\/span>
\n    {<\/span>unit:<\/span> "week"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> weekScaleTemplate}<\/span>,<\/span>
\n    {<\/span>unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%D"<\/span>,<\/span> css:<\/span>daysStyle }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Old settings will be deprecated. However, you may still keep on using them in your current projects, although we recommend switching to the updated settings in new projects.<\/p>\n

API Update and Other Improvements<\/h5>\n

Besides the changes in the API described above, we replaced several other configs and templates with more intuitive ones. Please check the details in the migration guide ><\/a><\/p>\n

Other minor issues were fixed in v6.2:<\/p>\n

\"ExpandingCheck the sample ><\/a> <\/p>\n