{"id":12017,"date":"2024-01-04T16:30:56","date_gmt":"2024-01-04T13:30:56","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12017"},"modified":"2026-09-15T14:18:37","modified_gmt":"2026-09-15T11:18:37","slug":"building-custom-javascript-gantt-chart-dhtmlx","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/building-custom-javascript-gantt-chart-dhtmlx\/","title":{"rendered":"Building a Custom JavaScript Gantt Chart with DHTMLX"},"content":{"rendered":"

When you claim that your product comes with advanced customization capabilities, be sure that customers will give it a harsh test. This rule is certainly applicable to DHTMLX Gantt. Our support team receives many requests on how to implement certain appearance customizations in our JavaScript Gantt component<\/a>. <\/p>\n

We combined several popular requests into one case and would like to show you how these customizations are implemented in practice.<\/p>\n

Use Case: JavaScript Gantt Chart with Custom Project Tasks, Resources, Icons, and More<\/h5>\n

DHTMLX Gantt comes with a comprehensive API that enables you to adjust the default view of our JavaScript component to your liking and any HTML elements to the timeline as in the example below:
\n\"DHTMLX
\nCheck the code snippet ><\/a><\/p>\n

This JavaScript Gantt chart includes numerous customizations delivered with DHTMLX Gantt. Here, we changed the look of project tasks, specified resources in the grid as well as in the timeline, added the ability to show task names and resource images inside task bars, highlighted weekends and regular tasks belonging to a particular project, and placed custom icons on top of tasks.<\/p>\n

Such customizations will make it much easier for end-users to manage the workflow and keep track of resource distribution. So without further ado, let us provide you with more details on how to add such features to your Gantt project.<\/p>\n

Project Task Bars with Custom Brackets<\/h5>\n

In Gantt charts, it can be useful to display projects with special brackets (triangles) that indicate the projects\u2019 start and end dates. By default, DHTMLX Gantt shows all tasks (including projects) as rectangles, and there is no such built-in feature for emphasizing the timeframe in project tasks. However, the rich API of our Gantt allows you to add such elements to a web project.<\/p>\n

For instance, it can be done via gantt.config.type_renderers<\/strong>. Using this config, you can completely redefine the appearance of tasks. We also have an official sample<\/a> on the subject. This option offers plenty of customization opportunities, but it also causes some inconvenience. The thing is that when creating custom elements, you\u2019ll have to manually add HTML-elements with particular classes and properties or event handlers for some existing Gantt features such as handlers for adding dependencies or a progress bar, otherwise they won\u2019t work. <\/p>\n

But don\u2019t worry, there are two other ways to solve this task. The first one of them is to use an additional layer that allows displaying any HTML elements in the Gantt timeline. <\/p>\n

Another more convenient approach for adding custom brackets is to apply CSS. You can do it using ::before<\/strong> and ::after<\/strong> pseudo-elements.<\/p>\n

They will have the following common styles:<\/p>\n

.gantt_project<\/span>::<\/span>before<\/span>,<\/span>
\n.gantt_project<\/span>::<\/span>after<\/span> {<\/span>
\n    content<\/span>:<\/span> ""<\/span>;<\/span>
\n    position<\/span>:<\/span> absolute<\/span>;<\/span>
\n    top<\/span>:<\/span> 100%<\/span>;<\/span>
\n    background-color<\/span>:<\/span> transparent<\/span>;<\/span>
\n    border-style<\/span>:<\/span> solid<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Custom brackets are drawn with the border<\/strong> property, but you need to add the border-width<\/strong> parameter in the style rules:<\/p>\n

.gantt_project<\/span>::<\/span>before<\/span> {<\/span>
\n    left<\/span>:<\/span> -1px<\/span>;<\/span>
\n    border-width<\/span>:<\/span> 0px<\/span> 0px<\/span> var<\/span>(<\/span>--gantt-bracket-height<\/span>)<\/span> var<\/span>(<\/span>--gantt-bracket-width<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\n
\n.gantt_project<\/span>::<\/span>after<\/span> {<\/span>
\n    right<\/span>:<\/span> 0px<\/span>;<\/span>
\n    border-width<\/span>:<\/span> 0px<\/span> var<\/span>(<\/span>--gantt-bracket-width<\/span>)<\/span> var<\/span>(<\/span>--gantt-bracket-height<\/span>)<\/span> 0px<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Since each project will have a different color, you will need to generate styles based on the project colors. For this purpose, iterate through each task and see if it is a project and has the color<\/strong> parameter. If so, you should add styles to the ::before<\/strong> and ::after<\/strong> pseudo-elements. The name of the class will be the following combination: “task + task ID”.<\/p>\n

const<\/span> dynamicStyle =<\/span> document.createElement<\/span>(<\/span>'style'<\/span>)<\/span>;<\/span>
\ngantt.eachTask<\/span>(<\/span>function<\/span> (<\/span>task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.project<\/span> &&<\/span> task.color<\/span>)<\/span> {<\/span>
\n        dynamicStyle.innerHTML<\/span> +=<\/span> `
\n        .task_<\/span>${<\/span>task.id<\/span>}<\/span>.gantt_project<\/span>::<\/span>before{<\/span>
\n            border-<\/span>color:<\/span> transparent transparent transparent ${<\/span>task.color<\/span>}<\/span>;<\/span>
\n        }<\/span>
\n
\n        .task_<\/span>${<\/span>task.id<\/span>}<\/span>.gantt_project<\/span>::<\/span>after {<\/span>
\n            border-<\/span>color:<\/span> transparent ${<\/span>task.color<\/span>}<\/span> transparent transparent;<\/span>
\n        }<\/span>
\n    `;<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>
\ndocument.body<\/span>.appendChild<\/span>(<\/span>dynamicStyle)<\/span>;<\/span><\/div><\/div>\n

It is also necessary to apply the task_class<\/strong> template to return a custom class, in which you need to check the task type. If it is a project type, add classic_project<\/strong> to the variable. Also, check whether the task has the color<\/strong> property, and if so, add task + task ID to the variable. After that, you should return a variable with all custom class names.<\/p>\n

gantt.templates<\/span>.task_class<\/span> =<\/span> function<\/span> (<\/span>start,<\/span> end,<\/span> task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.project<\/span>)<\/span> {<\/span>
\n        let css =<\/span> "classic_project"<\/span>;<\/span>
\n        if<\/span> (<\/span>task.color<\/span>)<\/span> {<\/span>
\n            css +=<\/span> ` task_${<\/span>task.id<\/span>}<\/span>`;<\/span>
\n        }<\/span>
\n        return<\/span> css;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

There is one more condition to make everything work smoothly. It is the height of project elements. By default, task bars can be stretched to almost the entire available row height. It means that you need to reduce the height of the task bar to show corners in the project bar. You can do it using the bar_height parameter that should be specified for projects.<\/p>\n

"row_height"<\/span>:<\/span> 40<\/span>,<\/span>
\n"bar_height"<\/span>:<\/span> 20<\/span>,<\/span><\/div><\/div>\n

Please note, that if you don\u2019t do that, brackets in project tasks will extend beyond the task boundaries and will be displayed on the row below.<\/em><\/p>\n

Assigning Resources to Tasks<\/h5>\n

The next feature is the ability to assign resources (in our case employees) to tasks. Our Gantt is known for wide resource management<\/a> capabilities, including a separate resource panel<\/a>. <\/p>\n

But if you need a simpler configuration with individual elements, you can work with resources in a simplified form<\/a>.<\/p>\n

In our demo, we have an array, where names and photos of employees are specified. It is implied that such data can be loaded from the server.<\/p>\n

const<\/span> resourceData =<\/span> [<\/span>
\n    {<\/span> "key"<\/span>:<\/span> "1"<\/span>,<\/span> "label"<\/span>:<\/span> "John"<\/span> }<\/span>,<\/span>
\n    {<\/span> "key"<\/span>:<\/span> "2"<\/span>,<\/span> "label"<\/span>:<\/span> "Mike"<\/span> }<\/span>,<\/span>
\n    {<\/span> "key"<\/span>:<\/span> "3"<\/span>,<\/span> "label"<\/span>:<\/span> "Anna"<\/span> }<\/span>,<\/span>
\n    {<\/span> "key"<\/span>:<\/span> "4"<\/span>,<\/span> "label"<\/span>:<\/span> "Bill"<\/span> }<\/span>,<\/span>
\n    {<\/span> "key"<\/span>:<\/span> "5"<\/span>,<\/span> "label"<\/span>:<\/span> "Floe"<\/span> }<\/span>,<\/span>
\n]<\/span><\/div><\/div>\n

Our Gantt has a lightbox section that enables you to assign several resources to one task and specify the resource value (hours, days, materials, etc.). To make it work properly, you need to specify an array with resources in the options<\/strong> parameter.<\/p>\n

{<\/span> name:<\/span> "resources"<\/span>,<\/span> type:<\/span> "resources"<\/span>,<\/span> map_to:<\/span> "owners"<\/span>,<\/span> options:<\/span> resourceData,<\/span> default_value:<\/span> 8<\/span> }<\/span>,<\/span><\/div><\/div>\n

When using the custom configuration, the array must contain objects with the key<\/strong> and label<\/strong> parameters.<\/p>\n

In our demo, we also show resources (photos of employees) assigned to tasks in the grid section. To do that, you need to use the template<\/strong> function of the column configuration, in which the value of the getOwnerPics<\/strong> function will be returned.<\/p>\n

name:<\/span> "owners"<\/span>,<\/span> label:<\/span> "Owners"<\/span>,<\/span> resize:<\/span> true<\/span>,<\/span> width:<\/span> 75<\/span>,<\/span> template:<\/span> function<\/span> (<\/span>task)<\/span> {<\/span>
\n    return<\/span> getOwnerPics(<\/span>task)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

In this function, it is necessary to use the owners<\/strong> task property, where assigned resources are indicated. If there are assignments, you should add the resource ID to a separate owners<\/strong> array. <\/p>\n

The next step is to iterate through the array with the resource data. If the resource ID is in the owners<\/strong> array, take the property with the photo and add it to the images<\/strong> variable. After that, you return this variable containing all photos of employees.<\/p>\n

function<\/span> getOwnerPics(<\/span>task)<\/span> {<\/span>
\n    let images =<\/span> ""<\/span>;<\/span>
\n
\n    const<\/span> owners =<\/span> [<\/span>]<\/span>;<\/span>
\n    (<\/span>task.owners<\/span> ||<\/span> [<\/span>]<\/span>)<\/span>.forEach<\/span>(<\/span>function<\/span> (<\/span>el)<\/span> {<\/span>
\n        owners.push<\/span>(<\/span>el.resource_id<\/span>)<\/span>;<\/span>
\n    }<\/span>)<\/span>
\n
\n    resourceData.forEach<\/span>(<\/span>function<\/span> (<\/span>resource)<\/span> {<\/span>
\n        if<\/span> (<\/span>owners.indexOf<\/span>(<\/span>resource.key<\/span>)<\/span> ><\/span> -<\/span>1<\/span>)<\/span> {<\/span>
\n            images +=<\/span> " "<\/span> +<\/span> resource.img<\/span> ||<\/span> ""<\/span>;<\/span>
\n        }<\/span>
\n    }<\/span>)<\/span>
\n
\n    return<\/span> images;<\/span>
\n}<\/span><\/div><\/div>\n
Task Names and Resources inside Task Bars<\/h5>\n

If you take a look at our Gantt demo, you can see that some task bars are displayed with task names and resource images inside them. If they do not fit in there, these elements will be displayed to the right of the task bar.<\/p>\n

To determine if the task name and employee\u2019s image can be placed inside the task bar, you are required to apply the detectOverflow<\/strong> function. In this function, you first use the getTaskPosition()<\/strong> method to get the coordinates of the task bar. Since you need only the width of the task bar, take the width<\/strong> parameter from the object returned by the getTaskPosition()<\/strong> method.<\/p>\n

const<\/span> taskWidth =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.start_date<\/span>,<\/span> task.end_date<\/span>)<\/span>.width<\/span>;<\/span><\/div><\/div>\n

Then it is required to create the canvas element. Use the getComputedStyle()<\/strong> method to find out the font family and font size of the text that is usually displayed in the task bar. After that, specify these parameters in the context<\/strong> element and use the measureText()<\/strong> method to determine the text width.<\/p>\n

const<\/span> canvas =<\/span> document.createElement<\/span>(<\/span>'canvas'<\/span>)<\/span>;<\/span>
\nconst<\/span> context =<\/span> canvas.getContext<\/span>(<\/span>"2d"<\/span>)<\/span>;<\/span>
\n
\nconst<\/span> bar =<\/span> document.querySelector<\/span>(<\/span>".gantt_task_content"<\/span>)<\/span>
\nif<\/span> (<\/span>bar)<\/span> {<\/span>
\n    const<\/span> fontFamily =<\/span> getComputedStyle(<\/span>bar)<\/span>[<\/span>'font-family'<\/span>]<\/span>;<\/span>
\n    const<\/span> fontSize =<\/span> getComputedStyle(<\/span>bar)<\/span>[<\/span>'font-size'<\/span>]<\/span>;<\/span>
\n    context.font<\/span> =<\/span> fontSize +<\/span> ' '<\/span> +<\/span> fontFamily;<\/span>
\n}<\/span>
\nconst<\/span> textWidth =<\/span> context.measureText<\/span>(<\/span>task.text<\/span>)<\/span>.width<\/span>;<\/span><\/div><\/div>\n

Now it is time to add photos to the task bar. You have to specify the width of these photos to do that. In our demo, the width of images is adjusted to the height of task bars, so you can use the value of the gantt.config.row_height<\/strong> config. But if the width of the elements is different, you\u2019ll need to set a new value. The width value must be multiplied by the number of resources assigned to a given task.<\/p>\n

const<\/span> ownersWidth =<\/span> (<\/span>task.owners<\/span> ||<\/span> [<\/span>]<\/span>)<\/span>.length<\/span> *<\/span> gantt.config<\/span>.row_height<\/span>;<\/span><\/div><\/div>\n

Now, it is necessary to sum up the width values of text and images. If the resulting value is greater than the width of the task bar, you return true. It means that the content (text + photo) won\u2019t be included in the task bar.<\/p>\n

if<\/span> (<\/span>textWidth +<\/span> ownersWidth ><\/span> taskWidth)<\/span> {<\/span>
\n    return<\/span> true<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

If detectOverflow<\/strong> returns false<\/em>, the task_text<\/strong> template contains the following condition. If the task type is a project, you will simply return the task text. If it is a regular task, return an HTML element with the task text and employees\u2019 photos that you can get from the getOwnerPics<\/strong> function.<\/p>\n

gantt.templates<\/span>.task_text<\/span> =<\/span> function<\/span> (<\/span>start,<\/span> end,<\/span> task)<\/span> {<\/span>
\n    if<\/span> (<\/span>detectOverflow(<\/span>task)<\/span>)<\/span> {<\/span>
\n        return<\/span> ""<\/span>
\n    }<\/span>
\n    else<\/span> {<\/span>
\n        if<\/span> (<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.project<\/span>)<\/span> {<\/span>
\n            return<\/span> task.text<\/span>;<\/span>
\n        }<\/span>
\n        else<\/span> {<\/span>
\n            return<\/span> `<<\/span>span style=<\/span>"vertical-align: top"<\/span> ><\/span>${<\/span>task.text<\/span>}<\/span><\/<\/span>span><\/span>${<\/span>getOwnerPics(<\/span>task)<\/span>}<\/span>`;<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

In the rightside_text<\/strong> template, use the detectOverflow<\/strong> function for tasks with the “task” type. If this function returns true<\/em>, you should return an HTML element with the task text and employees\u2019 images from the getOwnerPics<\/strong> function.<\/p>\n

In DHTMLX Gantt, it is possible to use only one template. You can’t specify different templates multiple times and expect them to work properly. So you have to add all the code inside one template:<\/p>\n

gantt.templates<\/span>.rightside_text<\/span> =<\/span> function<\/span> (<\/span>start,<\/span> end,<\/span> task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.project<\/span>)<\/span> {<\/span>
\n        return<\/span> `<<\/span>div class<\/span>=<\/span>'project-right'<\/span> style=<\/span>"${getTriangleStyles(task, "<\/span>right")}"<\/span>><\/<\/span>div><\/span>`
\n    }<\/span>
\n
\n
\n    if<\/span> (<\/span>detectOverflow(<\/span>task)<\/span>)<\/span> {<\/span>
\n        return<\/span> `<<\/span>span style=<\/span>"vertical-align: top"<\/span> ><\/span>${<\/span>task.text<\/span>}<\/span><\/<\/span>span><\/span>${<\/span>getOwnerPics(<\/span>task)<\/span>}<\/span>`;<\/span>
\n    }<\/span>
\n    return<\/span> ""<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n
Highlighting Project\u2019s Tasks and Weekends<\/h5>\n

When managing projects via a JavaScript Gantt chart built with DHTMLX, it can be useful to be able to highlight groups of tasks belonging to separate projects as well as weekends. <\/p>\n

Let’s start by highlighting the project’s tasks. To enable this feature, you need to apply an additional layer that is drawn depending on the task coordinates. But before that, check if the task type is a project.<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>function<\/span> (<\/span>task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.type<\/span> ==<\/span> "project"<\/span>)<\/span> {<\/span><\/div><\/div>\n

Use the getTaskPosition()<\/strong> method to get the project coordinates. The topmost coordinate is already known – the top<\/strong> parameter in the sizes<\/strong> object.<\/p>\n

const<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.start_date<\/span>,<\/span> task.end_date<\/span>)<\/span>;<\/span><\/div><\/div>\n

Add the leftmost task coordinates to the left<\/strong> array and the rightmost coordinates to the right<\/strong> array, then iterate through each subtask of the project and add these coordinates. Also, increase the height<\/strong> parameter in the sizes<\/strong> object depending on the coordinates of the subtask.<\/p>\n

const<\/span> left =<\/span> [<\/span>sizes.left<\/span>]<\/span>;<\/span>
\nconst<\/span> right =<\/span> [<\/span>sizes.left<\/span> +<\/span> sizes.width<\/span>]<\/span>;<\/span>
\ngantt.eachTask<\/span>(<\/span>function<\/span> (<\/span>child)<\/span> {<\/span>
\n    const<\/span> childSizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>child,<\/span> child.start_date<\/span>,<\/span> child.end_date<\/span>)<\/span>;<\/span>
\n    left.push<\/span>(<\/span>childSizes.left<\/span>)<\/span>
\n    right.push<\/span>(<\/span>childSizes.left<\/span> +<\/span> childSizes.width<\/span>)<\/span>
\n    if<\/span> (<\/span>sizes.height<\/span> <<\/span> childSizes.top<\/span> +<\/span> childSizes.height<\/span>)<\/span> sizes.height<\/span> =<\/span> childSizes.top<\/span> +<\/span> childSizes.height<\/span> -<\/span> sizes.top<\/span>
\n}<\/span>,<\/span> task.id<\/span>)<\/span>;<\/span><\/div><\/div>\n

After iterating through all the tasks, you have to sort the left<\/strong> array to get the minimum value, and then add it to the left<\/strong> parameter of the sizes<\/strong> object.<\/p>\n

sizes.left<\/span> =<\/span> left.sort<\/span>(<\/span>(<\/span>a,<\/span> b)<\/span> =><\/span> a -<\/span> b)<\/span>[<\/span>0<\/span>]<\/span><\/div><\/div>\n

Next, sort the right<\/strong> array, but don’t add the rightmost value to the right<\/strong> parameter of the sizes<\/strong> object. Instead, subtract the leftmost coordinate from the resulting value to get the width of the rectangle.<\/p>\n

const<\/span> mostRight =<\/span> right.sort<\/span>(<\/span>(<\/span>a,<\/span> b)<\/span> =><\/span> a -<\/span> b)<\/span>.reverse<\/span>(<\/span>)<\/span>[<\/span>0<\/span>]<\/span>
\nsizes.width<\/span> =<\/span> mostRight -<\/span> sizes.left<\/span><\/div><\/div>\n

Then, you need to create an HTML element and take its coordinates from the sizes<\/strong> object. In styles, specify the color from the project’s color<\/strong> parameter. If you do not specify the color, it will be set to gray by default.<\/p>\n

When it comes to highlighting weekends, you should apply the timeline_cell_class<\/strong> template. Here, you should check if there is a date in the array with weekends, and if so, return a custom class name.<\/p>\n

const<\/span> weekends =<\/span> [<\/span>
\n    +<\/span>new<\/span> Date<\/span>(<\/span>2025<\/span>,<\/span> 11<\/span>,<\/span> 24<\/span>)<\/span>,<\/span>
\n    +<\/span>new<\/span> Date<\/span>(<\/span>2025<\/span>,<\/span> 11<\/span>,<\/span> 25<\/span>)<\/span>,<\/span>
\n    +<\/span>new<\/span> Date<\/span>(<\/span>2025<\/span>,<\/span> 11<\/span>,<\/span> 31<\/span>)<\/span>,<\/span>
\n    +<\/span>new<\/span> Date<\/span>(<\/span>2026<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>)<\/span>,<\/span>
\n]<\/span>
\n
\ngantt.templates<\/span>.timeline_cell_class<\/span> =<\/span> function<\/span> (<\/span>task,<\/span> date)<\/span> {<\/span>
\n    if<\/span> (<\/span>weekends.indexOf<\/span>(<\/span>+<\/span>date)<\/span> ><\/span> -<\/span>1<\/span>)<\/span> {<\/span>
\n        return<\/span> "weekend"<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n
Custom Icons on Top of Tasks<\/h5>\n

And finally, we want to share with you how to display custom icons on top of tasks. An easy way to do that is to make use of the addTaskLayer()<\/strong> method. With this method, you can check if the task has the icon<\/strong> parameter, which will indicate whether the task has a custom icon. It is a custom task property<\/a> that we added to our demo project.<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>function<\/span> (<\/span>task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.type<\/span> ==<\/span> "project"<\/span>)<\/span> {<\/span><\/div><\/div>\n

After that, let\u2019s take the coordinates of the task using the getTaskPosition()<\/strong> method. Then, create an HTML element, specify an image from an array with icons depending on the icon<\/strong> parameter, and set styles.<\/p>\n

const<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.end_date<\/span>,<\/span> task.end_date<\/span>)<\/span>;<\/span>
\n
\nconst<\/span> img =<\/span> document.createElement<\/span>(<\/span>'img'<\/span>)<\/span>;<\/span>
\nimg.src<\/span> =<\/span> icons[<\/span>task.icon<\/span> -<\/span> 1<\/span>]<\/span>
\nimg.style<\/span> =<\/span> `
\n    left:<\/span> ${<\/span>sizes.left<\/span> -<\/span> 10<\/span>}<\/span>px;<\/span>
\n    width:<\/span> 30px;<\/span>
\n    top:<\/span> ${<\/span>sizes.top<\/span>}<\/span>px;<\/span>
\n    height:<\/span> 30px;<\/span>
\n    margin-<\/span>top:<\/span> 2px;<\/span>
\n
\n
\n    position:<\/span> absolute;<\/span>
\n    border-<\/span>radius:<\/span> 2px;<\/span>
\n    color:<\/span> white;<\/span>
\n    opacity:<\/span> 0.9<\/span>;<\/span>
\n    z-<\/span>index:<\/span>1<\/span>;<\/span>
\n    pointer-<\/span>events:<\/span> none;<\/span>
\n           
\nreturn<\/span> img;<\/span><\/div><\/div>\n
Wrapping Up<\/h5>\n

Delivering a Gantt app is never a trifling matter, especially if it must include numerous customizations. We hope that this blog post will be one more useful addition to your arsenal of Gantt customization options and, if necessary, you\u2019ll easily integrate similar features into your app. Ready to share your unique Gantt customization scenarios? Send your ideas to us and we might choose it for one of our future articles.<\/p>\n

Related Materials:<\/h5>\n

That\u2019s it. Following the instructions above, you can implement the key custom Gantt features like in our sample<\/a> and add them to your project.<\/p>\n

If the simple Gantt configuration is used (gantt.config.resources<\/a><\/strong>) and resources are loaded from the server using the load()<\/strong> or parse()<\/strong> method, Gantt will automatically add the necessary parameters to the lightbox section.<\/p>\n