Posts: 2
Joined: Thu Mar 09, 2023 5:30 am

Stacked Bars in Gantt Chart


I have a requirement for making a Gantt chart. The data is dynamically received from an API. The following is the end result that is expected.
The problem I'm facing is stacking the bars vertically in one single row. Let's say I want to stack N number of bars vertically in one row itself, what are the ways to do that? For now I'm making a new series and putting my data there. The problem with that is the per row height is increased drastically even if the second row as only a single bar and no stacking in it. I want to stack the bars in a row but not increase height of the other rows. This is the JS fiddle of how I am stacking right now - I don't want the extra space in each row but to be height as auto and match the photo I have provided above. Please help me understand if the picture above is re-creatable in this scenario.
User avatar
Posts: 755
Joined: Thu Oct 06, 2022 11:31 am

Re: Stacked Bars in Gantt Chart


Thanks for contacting us with your question!

The image with the final result you sent is not visible, but I guess it's about setting different heights of the rows, depending on their content. Unfortunately, the Gantt chart sets all rows to the same width, so I'm afraid it's not possible to achieve what you want. However, you can consider using parents in one series instead of using multiple series as in the demo below.


​If you have further inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”