Let\u2019s go through the Gantt novelties in more detail.<\/p>\n
Workhour-Aware Scale Projection<\/h2>\n
In DHTMLX Gantt, the default timescale is based on days, and each day in the timeline covers a 24-hour span (00:00-24:00). But in real-case scenarios, one working day usually lasts 8 hours (e.g. 09:00-17:00). So, if you add a task that takes the whole working day to finish, it will fill only one-third of the 24-hour day cell. It may seem confusing, as if the task takes much less time to be completed than specified in the grid panel. The new workhour-aware scale projection<\/a> (projection mode) helps eliminate this visual mismatch. From now on, the length of task bars in the timeline depends on working hours rather than absolute time. In other words, a task that takes the full working day (8 hours) will fill the whole day cell. A task with a shorter duration\/timeframe will appear proportionally shorter within a given cell.<\/p>\n Since working hours may vary between employees or departments (4 or 6 hours instead of the common 8 hours), the new feature will help adjust taskbar lengths to reflect the actual working time.<\/p>\n The scale projection feature is applied to the bottom-most scale (Day or Week). To do that, you need to add the projection<\/strong> property to the corresponding scale object:<\/p>\n Technically speaking, there are three projection modes for displaying working hours in timeline cells:<\/p>\n Here is how working hours can be set manually:<\/p>\n After specifying the new setting for a particular task (e.g., 9.00-17.00 on Monday), it will persist when dragging or resizing this task. For instance, if you decide that this task should take not one but two days and resize the task, the taskbar will remain aligned with the set working hours on both days (9.00-17.00, not full days). At the same time, the scheduling logic for a task (start and end time) still depends on the worktime calendar applied for this task.<\/p>\n As a result, this novelty makes the timeline visualization match the real working schedule, which is especially useful when not all tasks follow the same daily schedule. <\/p>\n And don’t forget that this feature is working only for Day and Week scales, while other scale formats stick to absolute time.<\/p>\n Normally, the width of the Gantt timeline cells automatically stretches to fit the size of the chart container or shrinks to the minimum allowed width (min_column_width<\/strong>) when horizontal scrolling appears. But what if you need the Gantt timeline with a fixed column width for the time scale? From now on, you can set a specific length for columns<\/a> (e.g, 60 px) using the newly added column_width<\/strong> setting:<\/p>\n In the example above, first, you see the Gantt timeline with automatically adjusted column width, then it shows how the new column_width<\/strong> setting works in practice.<\/p>\n This novelty is applied only to the bottom scale. If not enabled, the default behavior persists.<\/p>\n In Gantt, split tasks are represented as subtasks of a parent task. By default, the parent bar is collapsed, and split subtasks are rendered on the parent\u2019s row. When expanded, split subtasks will render in separate subrows. From now on, you can control how each subtask renders on the timeline<\/a>.<\/p>\n For this purpose, you’ll need the new split_placement<\/strong> property of the task object, allowing you to specify the required mode depending on the state of the parent row:<\/p>\n
\n![\"Gantt](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/11\/image3.gif\")
Check the sample ><\/a><\/p>\n
\n {<\/span> unit:<\/span> "month"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%M %Y"<\/span> }<\/span>,<\/span>
\n {<\/span> unit:<\/span> "week"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> date =><\/span> {<\/span>
\n const<\/span> to =<\/span> gantt.date<\/span>.add<\/span>(<\/span>date,<\/span> 7<\/span> -<\/span> date.getDay<\/span>(<\/span>)<\/span>,<\/span> "day"<\/span>)<\/span>;<\/span>
\n const<\/span> format =<\/span> gantt.date<\/span>.date_to_str<\/span>(<\/span>"%d %M"<\/span>)<\/span>;<\/span>
\n return<\/span> `${<\/span>format(<\/span>date)<\/span>}<\/span> -<\/span> ${<\/span>format(<\/span>to)<\/span>}<\/span>`;<\/span>
\n }<\/span>}<\/span>,<\/span>
\n {<\/span> unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%d"<\/span>,<\/span> projection:<\/span> {<\/span> source:<\/span> "fixedHours"<\/span> }<\/span> }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n\n
\n {<\/span> unit:<\/span> \u201cday\u201d,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> \u201c%<\/span>d\u201d,<\/span> projection:<\/span> {<\/span> source:<\/span> \u201cfixedHours\u201d }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n
\n {<\/span> unit:<\/span> \u201cday\u201d,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> \u201c%<\/span>d\u201d,<\/span> projection:<\/span> {<\/span> source:<\/span> \u201cfixedHours\u201d,<\/span> hours:<\/span> \u201c09:<\/span>00-<\/span>18<\/span>:<\/span>00\u201d }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n\n
Fixed Column Width for the Time Scale<\/h2>\n
\n {<\/span> unit:<\/span> "month"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%F, %Y"<\/span> }<\/span>,<\/span>
\n {<\/span> unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> format:<\/span> "%j, %D"<\/span>,<\/span> column_width:<\/span> 60<\/span> }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n![\"Gantt](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/11\/image4.gif\")
Check the sample ><\/a><\/p>\nPer-Child Placement for Split Subtasks<\/h2>\n
\n
![\"placement](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/11\/image1.gif\")