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 
Sorry to piggy back on this one. Did anyone manage to find a way to natively construct the URL for the gantt chart within Glide?
I have a correctly constructed sandbox gantt chart based upon the code within this thread but i seem to be failing at this last hurdle.
I think you can do it easily enough with Javascript but you’d need quickchart-js installed which i dont think you can do natively in Glide. I may be mistaken.
Any help would be appreciated as this has my head in tatters.
I am not sure I fully understand your question. Can you provide examples? (Screenshots and links)
Also, depending on how similar your question is consider starting a new post. Still this sounds super interesting so send me a link if you do
Thanks for the reply Logan, I managed to find a fix on another forum which uses a URL construct column in Glide, with the following information:
Where tpChart is your template column with the data that works within the sandbox.
And with a link to the original post on the glide community forum: Quickchart Data Replacement (Template) - #3 by Darren_Murphy - Ask for Help - Glide Community
Thanks for this, I was trying to get my head around this too, and your clearly labeled and formatted example has really helped. Thanks!
One thing that really caught me out was that xAxes does NOT have a stacked setting, this was confusing because you’d think both axes are now stacked, but no, only Y.
