Highcharts stacked bar chart with a line chart config not showing the line chart in front of...

I am trying to implement a chart where we will have a stacked bar chart. The stacks represent 'Utilized', 'Not Utilized', 'Offline' and the line represent the average. The x-axis represents 0-23 hours of the day. below is the an example of the config:

Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Utilization Overview (3D)'
},
xAxis: {
categories: Array.from({ length: 24 }, (_, i) => i.toString()), // Hours from 0 to 23
title: {
text: 'Hour of the Day'
}
},
yAxis: {
min: 0,
title: {
text: 'Utilization'
}
},
tooltip: {
shared: false,
formatter: function() {
if (this.series.type === 'line') {
return `<b>Average</b>: ${this.y}`;
} else {
return `<b>${this.series.name}</b>: ${this.y}`;
}
}
},
plotOptions: {
column: {
stacking: 'normal',
depth: 25 // Set depth for columns
},
line: {
marker: {
enabled: false
},
zIndex: 10
}
},
series: [{
name: 'Utilized',
data: [5, 3, 4, 7, 2, 6, 8, 7, 5, 4, 6, 8, 9, 10, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3],
stack: 'utilization',
zIndex: 1
}, {
name: 'Not Utilized',
data: [2, 2, 3, 2, 1, 1, 2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
stack: 'utilization',
zIndex: 1
}, {
name: 'Offline',
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
stack: 'utilization',
zIndex: 1
}, {
name: 'Average',
type: 'line',
data: [4, 2.67, 2.67, 3.33, 1.33, 2.67, 3.67, 3.00, 2.67, 2.33, 2.67, 3.00, 3.67, 4.00, 4.67, 4.00, 4.00, 3.00, 2.67, 2.00, 2.00, 2.00, 2.00, 1.67],
zIndex: 10
}]
});


I want the line to be in front of the bars. It works when it's not 3d enabled. But it's not working when 3d is enabled

Continue reading...