{"id":6852,"date":"2019-11-14T11:15:22","date_gmt":"2019-11-14T08:15:22","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6852"},"modified":"2026-09-15T14:24:51","modified_gmt":"2026-09-15T11:24:51","slug":"dhtmlx-gantt-chart-6-3-decimal-durations-link-formatting-drag-n-drop-multiple-tasks-even-smarter-rendering","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-gantt-chart-6-3-decimal-durations-link-formatting-drag-n-drop-multiple-tasks-even-smarter-rendering\/","title":{"rendered":"DHTMLX Gantt Chart 6.3 with Decimal Durations, Link Formatting, Drag-n-Drop of Multiple Tasks, and Even Smarter Rendering"},"content":{"rendered":"

We’re eager to deliver the next important update of our HTML5 Gantt chart<\/a> library. This time, our development team has put a lot of effort into making DHTMLX Gantt even smarter and more flexible in v6.3. <\/p>\n

From now on, Gantt users may benefit from a new intelligent module for converting duration units from days to hours or minutes and back and specifying task duration in decimal format. Additionally, now our Gantt has an MS Project-like way of showing dependency links in the grid. We have also polished up scrolling the timescale, drag-n-drop of multiple tasks, and fullscreen mode. And that’s not all the new features and improvements in v6.3 – just keep on reading!<\/p>\n

Download a free 30-day evaluation version of DHTMLX Gantt 6.3 now ><\/a><\/strong><\/p>\n

Intelligent Duration Formatting [PRO]<\/h5>\n

In the previous versions of DHTMLX Gantt users could set task durations in whole numbers only. Starting with v6.3, they can specify the duration in fractional numbers as well. Now there’s no difficulty in assigning tasks that are 2.5 hours or 0.5 days long. Moreover, now Gantt is capable of converting minutes into hours, hours into days, days into months, etc. and vice versa. <\/p>\n

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

All that is possible due to a brand new Duration Formatter<\/strong><\/a> module, which is easy to set up.<\/p>\n

Firstly, if you’d like to specify task duration in fractions of an hour precision (for example, set the duration to 0.5 hours), you’ll need to store the duration of tasks in minutes:<\/p>\n

gantt.config<\/span>.duration_unit<\/span> =<\/span> "minute"<\/span>;<\/span><\/div><\/div>\n

Storing duration in hours will do as well and may be even better for the overall performance of the Gantt chart:<\/p>\n

gantt.config<\/span>.duration_unit<\/span> =<\/span> "hour"<\/span>;<\/span><\/div><\/div>\n

When you are done with that, just create the formatter<\/strong> object as described below and add it to the Duration column of the grid, lightbox, and inline editors if necessary:<\/p>\n

\/\/ formatting the duration<\/span>
\nvar<\/span> formatter =<\/span> gantt.ext<\/span>.formatters<\/span>.durationFormatter<\/span>(<\/span>{<\/span>
\n    enter:<\/span> "day"<\/span>,<\/span>
\n    store:<\/span> "minute"<\/span>,<\/span> \/\/ duration_unit<\/span>
\n    format:<\/span> "day"<\/span>,<\/span>
\n    hoursPerDay:<\/span> 8<\/span>,<\/span>
\n    hoursPerWeek:<\/span> 40<\/span>,<\/span>
\n    daysPerMonth:<\/span> 30<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
gantt.config<\/span>.columns<\/span> =<\/span> [<\/span>
\n    {<\/span>name:<\/span> "text"<\/span>,<\/span> tree:<\/span> true<\/span>,<\/span> width:<\/span> 170<\/span>,<\/span> resize:<\/span> true<\/span>,<\/span> editor:<\/span> textEditor}<\/span>,<\/span>
\n    {<\/span>name:<\/span> "start_date"<\/span>,<\/span> align:<\/span> "center"<\/span>,<\/span> resize:<\/span> true<\/span>,<\/span> editor:<\/span> dateEditor}<\/span>,<\/span>
\n    {<\/span>name:<\/span> "duration"<\/span>,<\/span> label:<\/span>"Duration"<\/span>,<\/span> resize:<\/span> true<\/span>,<\/span> align:<\/span> "center"<\/span>,<\/span>
\n        template:<\/span> function<\/span>(<\/span>task)<\/span> {<\/span>
\n            return<\/span> formatter.format<\/span>(<\/span>task.duration<\/span>)<\/span>;<\/span>
\n        }<\/span>,<\/span> width:<\/span> 100<\/span>}<\/span>,<\/span>
\n    {<\/span>name:<\/span> "add"<\/span>,<\/span> width:<\/span> 44<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n
MS Project-Like Link Formatting [PRO]<\/h5>\n

In v6.3 DHTMLX Gantt provides an alternative way of linking tasks with each other via inline editors in the grid. It is based on MS Project formats of task dependencies:<\/p>\n