HIGHCHARTS GANTT / X labels not rendering, not rotating, not overlapping - highcharts

Question

I have a chart with 3 X axes, the first show the year, the next line shows the Quarter (3 months) and the third by month, the expected behavior is similar to the following:
Now I do understand that because of the space, some of them disappear, but I tried to use allowOverlap and nothing happnes, rotate 90 or -90 and also nothing happens, and the worst of all is... when I zoom it shows correctly, but if I zoom out then zoom in other part of the chart, most of the months don't show, not because of lack of space, not sure why?, please take a look:
and when zooming out... (at the beginning it was showing just some months because of space, how did this get the space now?)
and when zooming back in...
please take a look at my code below:
xAxis: [
{
tickInterval: 1000 * 60 * 60 * 24 * 30,
labels: {
allowOverlap: true,
format: '{value:%b}',
style: {
fontSize: '8px'
},
rotate: 90,
},
units: [
[
'month',
[1]
]
]
},
{
currentDateIndicator: {
width: 1,
dashStyle: 'dash',
color: 'red',
label: undefined,
},
tickInterval: 1000 * 60 * 60 * 24 * 30,
units: [[
'month',
[3]
],],
labels: {
align: "center",
allowOverlap: true,
formatter: function AxisLabelsFormatterCallbackFunction() {
var providedLocalDate = new Date(this.value);
var realDate = new Date(providedLocalDate.getTime() + (providedLocalDate.getTimezoneOffset() * 60 * 1000));
var month = realDate.getMonth();
var QuarterNumber;
var MonthInits = [];
if (month >= 0 && month <= 2) {
QuarterNumber = 1;
MonthInits[0] = 'J';
MonthInits[1] = 'F';
MonthInits[2] = 'M';
}
if (month >= 3 && month <= 5) {
QuarterNumber = 2;
MonthInits[0] = 'A';
MonthInits[1] = 'M';
MonthInits[2] = 'J';
}
if (month >= 6 && month <= 8) {
QuarterNumber = 3;
MonthInits[0] = 'J';
MonthInits[1] = 'A';
MonthInits[2] = 'S';
}
if (month >= 9 && month <= 11) {
QuarterNumber = 4;
MonthInits[0] = 'O';
MonthInits[1] = 'N';
MonthInits[2] = 'D';
}
return `<div style="font-size: x-small; font-family:arial;font-weight:bold; color:${((QuarterNumber == 1 | QuarterNumber == 3) ? "#B86B00;" : "#0068B5;")};">QTR ${QuarterNumber}</div>`;
},
},
},
{
tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
labels: {
format: '{value:%Y}',
style: {
fontSize: '15px'
}
},
},
],