Gantt - Style task in 3 different colors

Gantt
#1

Hi,

I need to style each bar(task) in 3 different colors, each color with it’s own label. Is that possible?

Can someone please point me to the right documentation?

Regards
Jacques

#2

if you want to have different task color/text depending on some values of the task object(e.g. progress), you can use following templates

docs.dhtmlx.com/gantt/api__gantt … plate.html
docs.dhtmlx.com/gantt/api__gantt … plate.html

#3

Hi Aliaksandr,

I need to be able to specify 3 different colors and labels for a single bar. In the links you provided I can only specify the CSS class and text.

One method of achieving my goal would be to specify an HTML template that can be used for the bars. (EG.

</div
</div
</div </div)

Is something like that possible?

Regards
Jacques

#4

Gantt allows defining text labels at left and at right of the task bar(outside the bar), if thats what you need.
Please check this example from the package
/samples/04_customization/01_outer_content.html

docs.dhtmlx.com/gantt/api__gantt … plate.html
docs.dhtmlx.com/gantt/api__gantt … plate.html

There is no templates css class of these labels, but since they are nested inside task node, you can attach custom class to the task, and update styles of the labels with following selectors

.gantt_task_line .gantt_side_content.gantt_left,
.gantt_task_line .gantt_side_content.gantt_right,

#5

Hi Aliaksandr,

Please see attached image of what I need to be able to do.
Please keep in mind that the colors and labels will depend on properties on the task.

Waiting on your response.

Regards
Jacques

#6

It can be achieved with task_text template, since it allows any custom html.
Please check the attached example,
i’ve added three custom properties to the task object(progress1, progress2, progress3), and rendered three labels for the bar. However looks like such html content breaks horizontal d’n’d in timeline part of the gantt, we’ll fix the issue in the nearest time.
Gantt templates allows creating more complex behavior and appearence, although it may require some coding
bar_labels.zip (1.12 KB)

1 Like
#7

Spot on. Thank you very much.

I was not aware that the text template can render html. Is that the case for the other templates as well?

Regards
Jacques

#8

Yes, all content templates can work with HTML. One drawback of this approach - you have to sanitize the data you load into gantt to prevent possible xss attacks (dhtmlxConnector does it automatically if you use it)

#9

I stumbled on this thread recently needing this functionality, and just wanted to add an example of what we are using in case it helps anyone… enjoy! PS, thanks for the direction in the previous posts!!

https://www.w3schools.com/code/tryit.asp?filename=GPSVDULD21OD