Multiple tasks in same row


This question has been already asked many times but there’s no solution so far.

  1. I have multiple tasks that I want to show on the same row.
  2. Each task has many children tasks.
  3. They are not going to be overlapping horizontally.
  4. I’m not using the “task list” feature so it can be disabled.
  5. I want to be able to set row_height etc. differently for some sibling tasks.

What have I tried:

  1. Split tasks feature is too limited for that.
  2. The baseline demo is too limited.

What would be a better solution:

  1. Ability to add another layer of tasks (as in: initializing another gantt on top of current) looks like the only real solution. Can I somehow easily modify the source code and achieve that? I see that I can register a new layer renderer? Is that a solution maybe?

    var layers = gantt.$services.getService("layers");
    var markerRenderer = layers.createDataRender({
     name: "marker",
     defaultContainer: function defaultContainer() {
         return gantt.$marker_area;


Hello Jim,
The easiest way to display several tasks on the same row is to use the Split Tasks feature. Please, clarify what kind of limitations you encountered and what doesn’t work as you expect.

Another way is to use the Rollup feature:
If you add the rollup property, the task will be displayed on each parent task with the project type. Right now, there is no built-in way to specify the rollup level or on which parent projects the task should roll-up. The dev team will add that feature in the future, but I cannot give you any ETA.

We don’t provide the guides for modifying the source code or internal functions as they may change in the future, so, you won’t be able to easily migrate the changes.
Instead of that, we recommend implementing the features by using the Gantt API as we inform what is changed after the newer version is released:

You can modify the source code, but in that case, you will need to do it each time you update to a newer version.


Thanks for the response!

I think providing some solution or workaround (or at least a general direction) would be beneficial because the same question has been asked by more people than just me:

Here’s a better explanation as you requested, with pictures:

  1. I have a “split project” rather than “split task”. It can have sub-projects and sub-tasks.

  2. Each next “phase” or “milestone” of the project starts when the previous one ended so there would be no visual overlap.

  3. It’s only logical to have them appear on the same row and I need the sub-projects to be opened at the same time for all milestones (so “split task” is too limited for this).

  4. I also need another project below that, on its own line.

Image 1 is how things are displayed for me now:

Solutions that I’m considering:

  1. Somehow introduce an extension of “add layer of tasks” (which would be like another instance of gantt on top of current). I don’t need left “grid” in this mode.

  2. Somehow adjust CSS to add margin-top to all affected tasks to shift them up without modifying rows in the grid (???).

  3. Initialize multiple gantt instances and put them on top of each other but this would prevent click events from working so it’s like the last resort solution for me.


Image 2 is how I need them:

(Sorry, I had to make another post due to 1 image per post limitation.)