Bar customization

[uglovec]

Hi) I have two questions

1. How can I add a triangle like this at the bottom?
2. How can I add color border, and the color should be in the task object?

[Maksim_Lakatkou]

Hello,

How can I add a triangle like this at the bottom?

Unfortunately, there’s no built-in way to do that, but you can try adding it manually using the task_text template:

gantt.templates.task_text = (start, end, task) => {
	return `
		<span>${task.text}</span>
		<div class="custom-triangle" style="border-top-color:${task.color || 'black'}"></div>
	`;
};

And apply the following CSS styles:

.gantt_task_content {
    overflow: visible;
}

.custom-triangle {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-top: 6px solid red;
}

Please see an example: DHTMLX Snippet Tool

How can I add color border, and the color should be in the task object?

You can simply use the color property in the task object:

{ id: 2, text: 'Task #1.1', start_date: '03-05-2025 00:00', duration: 2, parent: '1', color: 'red' }