{"id":13008,"date":"2024-10-17T17:17:02","date_gmt":"2024-10-17T14:17:02","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13008"},"modified":"2026-09-15T14:24:03","modified_gmt":"2026-09-15T11:24:03","slug":"dhtmlx-gantt-9-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-gantt-9-0\/","title":{"rendered":"DHTMLX Gantt 9.0 with Overhauled Themes, New Dark Theme, Manually Scheduled Summaries, Built-in Baselines, and Much More"},"content":{"rendered":"

After months of meticulous work, we are happy to present DHTMLX Gantt 9.0. This milestone release makes the interface of our JavaScript Gantt chart<\/a> shine with new colors. Version 9.0 brings overhauled themes and significantly simplifies the look and feel customization of your Gantt charts. We\u2019ve also introduced manually scheduled summary tasks, built-in support for baselines, enhanced visualization of deadlines and constraints, sticky labels, and numerous other improvements to boost web applications based on our Gantt component.<\/p>\n

\"banner<\/a><\/p>\n

In this post, we’ll go over the new features and improvements that make DHTMLX Gantt 9.0 a must-have tool in tech stacks used for delivering comprehensive project management apps.<\/p>\n

Customizable Themes and Enhanced UI<\/h5>\n

A visually appealing and easily customizable UI is crucial for satisfying the needs of both web developers and end-users. In DHTMLX Gantt 9.0, we’ve made significant strides in enhancing the UI to provide a more modern and flexible experience.<\/p>\n

Overhauled Themes<\/h6>\n

Just like in the latest major update of DHTMLX Scheduler (v7.0), Gantt 9.0 brings a complete overhaul of themes. We’ve rewritten the core styles, adopting modern design practices to ensure your Gantt charts look fresh and trendy.<\/p>\n

Updated Terrace Theme<\/h6>\n

The default Terrace theme<\/a> has been revamped to align with modern UI standards. It now offers a cleaner, more vibrant appearance that enhances readability and user engagement.
\n\"updatedCheck the sample ><\/a><\/p>\n

New Dark Theme<\/h6>\n

The demand for a Dark theme in web apps continues to be high, and there are many reasons for such popularity. Dark themes reduce eye strain and give your applications a sleek, modern look. Using v9.0, you can apply this popular theme to your Gantt projects.
\n\"NewCheck the sample ><\/a><\/p>\n

Gantt Customization with CSS Variables<\/h5>\n

Another standout styling feature included in v9.0 is simplified Gantt customization using CSS variables. These custom properties provide multiple benefits, as reviewed below in more detail.<\/p>\n

Easy Customization and Maintenance<\/h6>\n

CSS variables provide an easy and flexible way to modify the Gantt appearance. Web developers can define global style properties such as colors, fonts, and other styling elements, allowing quick updates across the entire Gantt chart with just a few changes.<\/p>\n

The following piece of code allows changing the color of scales, tasks, and links in the Gantt chart:<\/p>\n

:<\/span>root<\/span> {<\/span>
\n  \/* scales *\/<\/span>
\n  --dhx-gantt-scale-background<\/span>:<\/span> #8E8E8E<\/span>;<\/span>
\n  --dhx-gantt-base-colors-border-light<\/span>:<\/span> #C5C5C5<\/span>;<\/span>
\n  --dhx-gantt-base-colors-border<\/span>:<\/span> #DFE0E1<\/span>;<\/span>
\n  --dhx-gantt-scale-color<\/span>:<\/span> #FFF<\/span>;<\/span>
\n  --dhx-gantt-base-colors-icons<\/span>:<\/span> #00000099<\/span>;<\/span>
\n 
\n  \/* tasks *\/<\/span>
\n  --dhx-gantt-task-background<\/span>:<\/span> #3db9d3<\/span>;<\/span>
\n  --dhx-gantt-task-color<\/span>:<\/span> #FFFFFF<\/span>;<\/span>
\n  --dhx-gantt-project-background<\/span>:<\/span> #6AA84F<\/span>;<\/span>
\n  --dhx-gantt-project-color<\/span>:<\/span> #FFFFFF<\/span>;<\/span>
\n
\n  \/* links *\/<\/span>
\n  --dhx-gantt-link-background<\/span>:<\/span> #ffa011<\/span>;<\/span>
\n  --dhx-gantt-link-background-hover<\/span>:<\/span> #ffa011<\/span>;<\/span>
\n
\n}<\/span><\/div><\/div>\n

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

Any change to a variable, such as adjusting a primary color, will apply uniformly across the entire UI, keeping everything in sync. This also reduces the complexity and effort needed to maintain or update the UI over time.<\/p>\n

Theme Customization with CSS Variables<\/h6>\n

CSS variables also offer an opportunity to simplify the customization of existing Gantt themes. Thus, the UI becomes more adaptable to theme changes based on user preferences or specific project needs. <\/p>\n

Moreover, v9.0 makes it possible for end-users to switch between themes via app settings without the page reloading. Using this sample<\/a>, you can try this feature in action. <\/p>\n

The dynamic theme switching is implemented using the setSkin()<\/a><\/strong> method.<\/p>\n

For those who require extensive Gantt modifications, the v9.0 package includes themes\u2019 source files. It enables deep customization and rebuilding of themes to meet specific requirements.<\/p>\n

Learn more about theme customization options in the corresponding section<\/a> of our documentation.<\/p>\n

Icons Customization<\/h6>\n

In the new Gantt version, all icons are built with web fonts or SVG elements. It means you can customize icon styles directly through CSS variables, ensuring consistency across your application.<\/p>\n

For instance, here is the way to change the size and color of the \u201cplus\u201d icon used for adding new tasks:<\/p>\n

[<\/span>data-column-name=<\/span>'add'<\/span>]<\/span> {<\/span>
\n  --dhx-gantt-base-colors-icons<\/span>:<\/span> #25C79D<\/span>;<\/span>
\n  font-size<\/span>:<\/span> 18px<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

New Link Styling Option<\/h6>\n

We’ve also improved the way links are displayed between Gantt tasks. Now links can feature rounded borders, adding a smoother and more visually appealing connection between tasks. This is controlled by the new gantt.config.link_radius<\/a><\/strong> configuration option, where you can define the needed border radius for the links.<\/p>\n

gantt.config<\/span>.link_radius<\/span> =<\/span> 5<\/span>;<\/span><\/div><\/div>\n

By increasing the radius value, the curves of the links become more pronounced. If you prefer the classic straight lines without any rounding, you can disable this feature by setting the radius to 1.<\/p>\n

gantt.config<\/span>.link_radius<\/span> =<\/span> 1<\/span>;<\/span><\/div><\/div>\n

This novelty allows you to tailor the link styles to better match the application’s design aesthetics.<\/p>\n

Manually Scheduled Summary Tasks<\/h5>\n

Our team always looks for ways to increase flexibility and accuracy in managing projects with Gantt charts. The new Gantt version is enriched with the manual summary (project) tasks scheduling feature. It serves to outline project phases before specifying subtasks details, providing a common project timeline.<\/p>\n

By default, summary tasks automatically calculate their dates based on the earliest start and latest end dates of their subtasks. Now, end-users can set fixed start and end dates for summary tasks independently of their subtasks. As a result, the Gantt chart will display both the fixed duration of summary tasks and the duration derived from subtasks.<\/p>\n

To activate this feature for a summary task, set the auto_scheduling<\/strong> property to false<\/em>. The fixed dates are stored in task.start_date<\/strong> and task.end_date<\/strong>, while the computed dates from subtasks are available in task.$auto_start_date<\/strong> and task.$auto_end_date<\/strong>.<\/p>\n

gantt.parse<\/span>(<\/span>{<\/span>
\n  data:<\/span> [<\/span>
\n    {<\/span>
\n      id:<\/span> 1<\/span>,<\/span>
\n      text:<\/span> "Project Phase 1"<\/span>,<\/span>
\n      type:<\/span> "project"<\/span>,<\/span>
\n      start_date:<\/span> "2025-05-01 00:00:00"<\/span>,<\/span>
\n      duration:<\/span> 15<\/span>,<\/span>
\n      auto_scheduling:<\/span> false<\/span>
\n    }<\/span>,<\/span>
\n    \/\/ ...<\/span>
\n  ]<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

This feature gives end-users a handy mechanism for ensuring accurate project management even with unplanned schedule changes.<\/p>\n

Built-in Support for Baselines<\/h5>\n

In tools like a Gantt chart, baselines give a clear idea of how the actual work progress aligns with the project implementation plan. Previously in DHTMLX Gantt, adding baselines required manual coding via the gantt.addTaskLayer<\/a> API. From now on, developers can enjoy built-in support for baseline entities, greatly simplifying the work with this important Gantt item.
\nBaselines can be loaded directly alongside tasks, streamlining the presentation and management of Gantt data.<\/p>\n

gantt.parse<\/span>(<\/span>{<\/span>
\n  tasks:<\/span> [<\/span>
\n    {<\/span>
\n      id:<\/span> 2<\/span>,<\/span>
\n      start_date:<\/span> "2025-04-04 00:00:00"<\/span>,<\/span>
\n      duration:<\/span> 2<\/span>,<\/span>
\n      text:<\/span> "Task #1"<\/span>,<\/span>
\n      progress:<\/span> 0.5<\/span>,<\/span>
\n      parent:<\/span> 0<\/span>,<\/span>
\n      open:<\/span> true<\/span>,<\/span>
\n      end_date:<\/span> "2025-04-06 00:00:00"<\/span>,<\/span>
\n    }<\/span>,<\/span>
\n    \/\/ Additional tasks...<\/span>
\n  ]<\/span>,<\/span>
\n  links:<\/span> [<\/span>]<\/span>,<\/span>
\n  baselines:<\/span> [<\/span>
\n    {<\/span>
\n      id:<\/span> 2<\/span>,<\/span>
\n      task_id:<\/span> 2<\/span>,<\/span>
\n      start_date:<\/span> "2025-04-03 00:00:00"<\/span>,<\/span>
\n      duration:<\/span> 2<\/span>,<\/span>
\n      end_date:<\/span> "2025-04-05 00:00:00"<\/span>,<\/span>
\n    }<\/span>,<\/span>
\n    \/\/ Additional baselines...<\/span>
\n  ]<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Once baselines are loaded, Gantt will automatically display them in the timeline without any additional configuration like in this sample<\/a>.<\/p>\n

Managing baselines is now more intuitive with the new lightbox control. End-users can easily add, edit, or delete baselines directly from the task edit form.<\/p>\n

This new control is specified as follows:<\/p>\n

gantt.config<\/span>.lightbox<\/span>.sections<\/span> =<\/span> [<\/span>
\n  {<\/span> name:<\/span> "description"<\/span>,<\/span> height:<\/span> 38<\/span>,<\/span> map_to:<\/span> "text"<\/span>,<\/span> type:<\/span> "textarea"<\/span>,<\/span> focus:<\/span> true<\/span> }<\/span>,<\/span>
\n  {<\/span> name:<\/span> "time"<\/span>,<\/span> type:<\/span> "duration"<\/span>,<\/span> map_to:<\/span> "auto"<\/span> }<\/span>,<\/span>
\n  {<\/span> name:<\/span> "baselines"<\/span>,<\/span> height:<\/span> 100<\/span>,<\/span> type:<\/span> "baselines"<\/span>,<\/span> map_to:<\/span> "baselines"<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Find more details on the new baseline capabilities in the documentation<\/a>.<\/p>\n

Flexible Baseline Rendering Modes<\/h6>\n

We understand that projects differ in workflow visualization needs. The new Gantt v9.0 offers three options for displaying baselines, controlled by the new gantt.config.baselines.render_mode<\/a><\/strong> configuration:<\/p>\n

Both the fixed duration of the summary task and the actual duration calculated from its subtasks are displayed in the Gantt chart. If the subtask date range falls outside the assigned dates of the summary task, the summary task will be highlighted in red to indicate a scheduling conflict as in the example below. This visual cue helps end-users quickly identify and address discrepancies in the project timeline.
\n\"manuallyCheck the sample ><\/a><\/p>\n