HIGHCHARTS Gantt / X axis Displaying YEAR / QUARTERS / MONTHS - highcharts

Question

we are trying to create 3 X header lines, one containing the years, other the quarters and the last one containing months... something similar to this:
As you can see in the image above, we have 2 lines, one with years, the other one is quarters (3 months), we would like to add an additional line below each quarter with the months, our code looks like:
NOTE: As 3 months (quarter) is not something that has its label automatically, we created a label using the formatter.
Now when we try to add a third row like this:
What we get is something unexpected... years work right, while quarters are now extended like years, and the list of months is correct as follow:
The following image should give you a better idea of what we would like to achieve:
Thank you for any help you may bring. My code link is below.

Answer 1

Note this line in header it's called the x-axis, is an array of configuration objects. You can use xAxis.tickInterval to set the tick interval in axis units for each object.
In dateTimeLabelFormats, you can change the unit name to the required one.
xAxis: [{
tickInterval: 1000 * 60 * 60 * 24, // Days
labels: {
format: '{value:%e. %b.}',
style: {
fontSize: '8px'
}
},
units: [
[
'day',
[2]
]
]
}, {
tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
/* labels: {
format: '{value:%b}',
}, */
min: Date.UTC(2014, 3, 17),
max: Date.UTC(2015, 11, 0),
currentDateIndicator: true,
units: [
[
'month',
[3]
]
],
dateTimeLabelFormats: {
month: {
list: ['Quater']
}
}
}, {
tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
labels: {
format: '{value:%Y}',
style: {
fontSize: '15px'
}
},
linkedTo: 1
}],
Live demo: https://jsfiddle.net/BlackLabel/w3nb4oqj/