{"id":8743,"date":"2021-06-15T14:37:27","date_gmt":"2021-06-15T11:37:27","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=8743"},"modified":"2026-09-15T14:19:59","modified_gmt":"2026-09-15T11:19:59","slug":"custom-content-timeline-javascript-gantt-part-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/custom-content-timeline-javascript-gantt-part-1\/","title":{"rendered":"Custom Content in the Timeline of JavaScript Gantt (Part 1)"},"content":{"rendered":"

We continue exploring the PRO features of DHTMLX Gantt and sharing with you some curious details that can be helpful in project management applications.<\/p>\n

Our HTML5 Gantt chart<\/a> component is loved for its enhanced customization capabilities. A basic Gantt chart timeline commonly includes tasks and dependency links between them. But an extensive API of our component helps to make the Gantt chart more informative for end-users by complementing its timeline area with custom HTML content. <\/p>\n

In this post, we will review vivid examples of how to create custom baselines, highlight overdue tasks, and display task progress value in the Gantt timeline.<\/p>\n

Use cases of custom content in Gantt timeline<\/h2>\n

When it comes to integrating custom items in Gantt charts built with DHTMLX, it is necessary to create a layer and then embed the required content in it. Our Gantt component offers the addTaskLayer<\/a><\/strong> method for displaying custom elements such as baselines or deadlines in the timeline area. Moreover, there is the overlay<\/strong> extension that can be used with any third-party library for generating custom content on top of the Gantt chart. More technical details on utilizing both these approaches can be found in the documentation<\/a>. But we will focus on examples implemented with the addTaskLayer<\/strong> method.<\/p>\n

Custom baselines<\/h3>\n

The need to display custom baselines (or deadlines) is one of the most common examples of using extra layers with DHTMLX Gantt. The image below shows good-looking custom baselines added in the Gantt timeline.
\n\"customCheck the sample ><\/a><\/em><\/p>\n

In this example, baselines are positioned vertically as well as tasks. By default, elements of the extra layer will be placed behind tasks (it can be changed with styles, but in our example, it is not necessary). <\/p>\n

You have to use the getTaskPosition<\/strong> method to obtain the coordinates where custom items (baselines) should be drawn. Here you need to specify the task<\/strong> object and 2 dates (start and end dates of the baseline element). The appearance of baselines and coordinates are defined using styles.<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>function<\/span> draw_planned(<\/span>task)<\/span> {<\/span>
\n  if<\/span> (<\/span>task.planned_start<\/span> &&<\/span> task.planned_end<\/span>)<\/span> {<\/span>
\n    var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.planned_start<\/span>,<\/span> task.planned_end<\/span>)<\/span>;<\/span>
\n    var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n    el.className<\/span> =<\/span> 'baseline'<\/span>;<\/span>
\n    el.style<\/span>.left<\/span> =<\/span> sizes.left<\/span> -<\/span> 6<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.width<\/span> =<\/span> sizes.width<\/span> +<\/span> 10<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.height<\/span> =<\/span> sizes.height<\/span> +<\/span> 6<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    el.style<\/span>.top<\/span> =<\/span> sizes.top<\/span> +<\/span> 1<\/span> +<\/span> 'px'<\/span>;<\/span>
\n    return<\/span> el;<\/span>
\n  }<\/span>
\n  return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n<<\/span>style><\/span>
\n  .baseline<\/span> {<\/span>
\n    position:<\/span> absolute;<\/span>
\n    border-<\/span>radius:<\/span> 2px;<\/span>
\n    z-<\/span>index:<\/span>0<\/span>;<\/span>
\n    opacity:<\/span> 0.3<\/span>;<\/span>
\n    background:<\/span> #6dadf0;<\/span>
\n    border:<\/span> 1px solid #4a6bf8;<\/span>
\n  }<\/span>
\n  .gantt_task_line<\/span>,<\/span>
\n  .baseline<\/span>{<\/span>
\n    border-<\/span>radius:<\/span>20px;<\/span>
\n  }<\/span>
\n<\/<\/span>style><\/span><\/div><\/div>\n

That\u2019s how you can generate custom baselines using the getTaskPosition<\/strong> method and add them to the Gantt timeline.<\/p>\n

Highlighting overdue tasks<\/h3>\n

In real projects, tasks are frequently rescheduled causing time lags relative to the initial baselines and deadlines. End-users should be informed about such issues. For this purpose, you can come up with different custom solutions.
\n\"HighlightingCheck the sample ><\/a><\/p>\n

For instance, you can highlight cells in the timeline where the task duration exceeds the related baseline\/deadline. In the presented example, the baseline is drawn in a simpler way (compared to other examples reviewed in this article) and cells are highlighted with the help of the task_cell_class<\/strong> template:<\/p>\n

gantt.templates<\/span>.task_cell_class<\/span> =<\/span> function<\/span>(<\/span>item,<\/span>date)<\/span>{<\/span>
\n  if<\/span> (<\/span>item.planned_end<\/span>)<\/span> {<\/span>
\n    if<\/span> (<\/span>item.end_date<\/span> >=<\/span> item.planned_end<\/span> &&<\/span> date >=<\/span> item.planned_end<\/span> &&<\/span> date <<\/span> item.end_date<\/span>)<\/span> {<\/span>
\n      return<\/span> "overdue_cell"<\/span>
\n    }<\/span>
\n  }<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

The template will be called for each timeline cell (and for each task row). First, make sure that the task for the timeline row has the deadline date. Then check two conditions:<\/p>\n