Why is Highcharts x axis not respecting my categories in stacked area chart - highcharts

Question

I have created a stacked area chart in Highcharts at https://jsfiddle.net/kg3b2xyL/ I am feeding the hours as 24 categories (I guess I could have fed timestamps with an X-axis interval instead, but I think either way should work?). Each series correspondingly has 24 entries. Highcharts is charting the data okay and shows all the categories I gave it, but then it adds additional categories for some reason at the end on the right side of the chart, so that the numbers extend to 24 even though my categories started in the middle of the day and the final category in the categories list is 18. Is this a bug in Highcharts? Do I have to switch to feeding timestamps, or is there a way for this to work as I have coded it?
Thanks!
Here is my HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And my JavaScript:
Highcharts.chart('container', {
chart: {
type: 'area'
},
legend: {
enabled: false
},
title: {
text: 'Calls to technical support last 24 hours'
},
xAxis: {
title: {
text: 'Time of Day'
},
categories: ['19', '20', '21', '22', '23', '24', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']
},
yAxis: {
title: {
text: 'Calls during the hour'
},
},
tooltip: {
split: true,
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [
{ name: 'Jane', data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'John', data: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Julie', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Walter', data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Andy', data: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Julio', data: [2, 0, 0, 2, 0, 0, 2, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Rachel', data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Steven', data: [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Phil', data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
});

Answer 1

The issue can be resolved by deleting the zeros from Julio nad Reachel data - there are too many zeros.
Demo:
https://jsfiddle.net/BlackLabel/h50m9y72/