Hi Team,
I am new here and hoping there is a clever answer I couldn’t find in the documentation.
So ultimately I want to create stacked gantt charts like this:
Note how in the first row for ‘John McVie’ where the bar ends, there is a gap, and then it begins again. This is called stacking.
I discovered the quickchart gantt/timeline but cant get it to stack. Any advice?
Hi @Logan,
You can do this by creating multiple stacked data series. For example:
{
type: 'horizontalBar',
data: {
labels: ['Part 1', 'Part 1', 'Part 2', 'Part 3', 'Part 4', 'Part 5', 'Part 6'], // Duplicate "Part 1" for stacking
datasets: [
{
data: [
// Original "Part 1" event
[new Date('2021-02-01'), new Date('2021-05-01')],
],
categoryPercentage: 0.8,
barPercentage: 0.9,
backgroundColor: 'rgb(255, 99, 132, 1.0)',
},
{
data: [
// Additional event for "Part 1"
[new Date('2021-07-01'), new Date('2021-08-01')],
],
categoryPercentage: 0.8,
barPercentage: 0.9,
backgroundColor: 'rgb(255, 99, 132, 1.0)',
},
{
// Remaining parts as a single dataset or split further for more control
data: [
null, // Placeholder for the duplicated "Part 1"
[new Date('2021-05-10'), new Date('2021-07-01')],
[new Date('2021-04-20'), new Date('2021-11-31')],
[new Date('2021-08-01'), new Date('2021-09-01')],
[new Date('2021-02-10'), new Date('2021-07-01')],
[new Date('2021-07-20'), new Date('2021-11-31')],
],
categoryPercentage: 0.8,
barPercentage: 0.9,
backgroundColor: [
'rgba(255, 206, 86, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(255, 206, 86, 0.2)',
undefined,
],
}
],
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
position: 'top',
type: 'time',
time: {
unit: 'month'
},
ticks: {
min: new Date('2021-01-01'),
max: new Date('2022-01-01'),
}
}],
yAxes: [{
stacked: true, // Makes the stacked bars fill their entire series
}]
},
},
}
Hope this helps!
Hi Ian, thanks for your help, this looks really promising!
I had a bit of a play around but couldn’t get 3 sections in the first row and 2 sections in the second row.
I also had trouble avoiding duplicate row titles.
Would you be opposed to providing another example?
Hi Ian, I had some more time and seemed to have figured it out!
Thank you for your help
That looks great! Glad you got it working, let me know if you run into any other issues 
