Setting CSS properties on Task element


Is it possible to set the z-index CSS property of a task? I have tasks that overlap each other, which is fine. However, I need one of them to display on top of the other when this happens.

I tried
task['progressColor'] = primaryColor;
task['z-index'] = 100;

I also tried
task['progressColor'] = primaryColor;
task['z-index'] = '100';

Progress color works, but not the z-index.
Any ideas? Thank you!


Hello @chrisjj,

Yes, it’s possible. The gantt provides the “templates” functionality to customize the visual part of the gantt elements:

The best way to stylize tasks - is to use the task_class template:

with this template, you can return the additional class to tasks based on some conditions and define ruleset for this class in CSS, like in the following fragment:

// JS part 
gantt.templates.task_class = function(start, end, task){
  var css= "";
  if( === 1){
  	css += "z-index-low"
  if( ===2){
  	css += "z-index-high"
  return css;
// CSS part 
	z-index: -1 ; 

	z-index: 1;


Here is a demo: