Timeline Chart Grouped Rows not working

[pauldtsystems]

Hi everyone.

I'm trying to implement a timeline chart with group rows, but I can't get it to work, not even the demo code.

I'm using Brave browser.

Options snippet.

let options = {
series: [
{name: 'Macrocycle 1',data: [{x: 'Macrocycle',y: [new Date(2020, 0, 0).getTime(),new Date(2021, 0, 0).getTime()]}]},
{name: 'Preparation 1',data: [{x: 'Training Period',y: [new Date(2020, 0, 0).getTime(),new Date(2020, 6, 0).getTime()]}]},
{name: 'Competition 1',data: [{x: 'Training Period',y: [new Date(2020, 7, 0).getTime(),new Date(2020, 9, 0).getTime()]}]},
//{name: 'GPP',data: [{x: 'Training Phase',y: [new Date(2020, 0, 0).getTime(),new Date(2020, 3, 0).getTime()]}]},
//{name: 'SPP',data: [{x: 'Training Phase',y: [new Date(2020, 3, 0).getTime(),new Date(2020, 6, 0).getTime()]}]},
//{name: 'Pre-Competition',data: [{x: 'Training Phase',y: [new Date(2020, 6, 0).getTime(),new Date(2020, 9, 0).getTime()]}]},
//{name: '1',data: [{x: 'Mesocycle',y: [new Date(2020, 0, 0).getTime(),new Date(2020, 3, 0).getTime()]}]},
//{name: '2',data: [{x: 'Mesocycle',y: [new Date(2020, 3, 0).getTime(),new Date(2020, 6, 0).getTime()]}]},
//{name: '3',data: [{x: 'Mesocycle',y: [new Date(2020, 6, 0).getTime(),new Date(2020, 9, 0).getTime()]}]},
],
dataLabels: {
enabled: true
},
chart: {
id: 'mychart4',
height: 350,
//width: 935,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '50%',
rangeBarGroupRows: true
}
},
xaxis: {
type: 'datetime'
},
legend: {
show: false
},
}