Highcharts I've lost my drilldown scrollbar - highcharts

Question

So I'm baby stepping my chart to awesome levels, but somewhere along the way I have lost my scrollbar when drilling down to the detail data. It used to work perfectly, now it just shows however many it can fit in the viewing area and acts like the rest of them are not there.
I've been able to recreate the issue in this JSFiddle: https://jsfiddle.net/BigSexy/qx5uzdf6/38/
var categoriesSL = ['Elementary', 'Middle', 'High'];
var categoriesElem = ["Ack/Bingham (E)", "Ackerly (E)", "AR Kennedy", "Atkinson", "Auburndale", "Audubon", "Bates", "Bellewood (E)", "Binet (E)", "Blake"];
var categoriesMid = ["Ack/Bingham (M)", "Ackerly (M)", "Barret", "Bellewood (M)", "Binet (M)", "Boys Haven (M)", "Brook-Dupont (M)", "Brook-KMI (M)", "Brooklawn (M)", "Brown (M)"];
var categoriesHigh = ["Ack/Bingham (H)", "Ackerly (H)", "Atherton", "Ballard", "Bellewood (H)", "Binet (H)", "Boys Haven (H)", "Breck-Metro", "Brook-KMI (H)", "Brooklawn (H)"]
refChart = new Highcharts.chart('ctReferrals', {
chart: {
backgroundColor: 'whiteSmoke',
events: {
drilldown: function() {
switch (this.ddDupes[0]) {
case 'elem':
case 'elem2':
refChart.xAxis[0].setCategories(categoriesElem);
break;
case 'mid':
case 'mid2':
refChart.xAxis[0].setCategories(categoriesMid);
break;
case 'high':
case 'high2':
refChart.xAxis[0].setCategories(categoriesHigh);
break;
default:
break;
}
refChart.xAxis[0].update({
max: 5
}, true);
console.log('scroll!');
this.update({
scrollbar: {
enabled: true,
}
}, false);
},
drillupall: function() {
refChart.xAxis[0].setCategories(categoriesSL);
refChart.xAxis[0].update({
max: 2
}, true);
console.log('dont scroll!');
this.update({
scrollbar: {
enabled: false
}
}, false);
}
},
type: 'column',
},
title: {
text: 'Total # of Referrals by School Level'
},
subtitle: {
text: 'By Year'
},
xAxis: {
categories: categoriesSL,
min: 0,
max: 2,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
},
}
},
series: [{
name: '2017-18',
data: [{
color: '#7cb5ec',
drilldown: 'elem',
y: 13734
}, {
color: '#7cb5ec',
drilldown: 'mid',
y: 11999
}, {
color: '#7cb5ec',
drilldown: 'high',
y: 21245
}]
}, {
name: '2018-19',
data: [{
color: '#90ed7d',
drilldown: 'elem2',
y: 12500
}, {
color: '#90ed7d',
drilldown: 'mid2',
y: 10617
}, {
color: '#90ed7d',
drilldown: 'high2',
y: 21044
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
id: 'elem',
name: '2017-18',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#7cb5ec",
drilldown: "elem",
y: 5
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#7cb5ec",
drilldown: "elem",
y: 562
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#7cb5ec",
drilldown: "elem",
y: 88
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#7cb5ec",
drilldown: "elem",
y: 48
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#7cb5ec",
drilldown: "elem",
y: 51
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#7cb5ec",
drilldown: "elem",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#7cb5ec",
drilldown: "elem",
y: 271
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#7cb5ec",
drilldown: "elem",
y: 282
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#7cb5ec",
drilldown: "elem",
y: 44
}
]
}, {
id: 'elem2',
name: '2018-19',
data: [{
schoolLevel: "01",
schoolID_alt: "993",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "990",
color: "#fdfd96",
drilldown: "elem2",
y: 0
},
{
schoolLevel: "01",
schoolID_alt: "194",
color: "#ff6961",
drilldown: "elem2",
y: 43
},
{
schoolLevel: "01",
schoolID_alt: "117",
color: "#90ed7d",
drilldown: "elem2",
y: 178
},
{
schoolLevel: "01",
schoolID_alt: "92",
color: "#90ed7d",
drilldown: "elem2",
y: 83
},
{
schoolLevel: "01",
schoolID_alt: "30",
color: "#90ed7d",
drilldown: "elem2",
y: 9
},
{
schoolLevel: "01",
schoolID_alt: "39",
color: "#ff6961",
drilldown: "elem2",
y: 103
},
{
schoolLevel: "01",
schoolID_alt: "989",
color: "#ff6961",
drilldown: "elem2",
y: 33
},
{
schoolLevel: "01",
schoolID_alt: "932",
color: "#ff6961",
drilldown: "elem2",
y: 322
},
{
schoolLevel: "01",
schoolID_alt: "103",
color: "#90ed7d",
drilldown: "elem2",
y: 74
},
{
schoolLevel: "01",
schoolID_alt: "123",
color: "#ff6961",
drilldown: "elem2",
y: 57
}
]
}, {
id: 'mid',
name: '2017-18',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#7cb5ec",
drilldown: "mid",
y: 27
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#7cb5ec",
drilldown: "mid",
y: 178
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#7cb5ec",
drilldown: "mid",
y: 2
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#7cb5ec",
drilldown: "mid",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#7cb5ec",
drilldown: "mid",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#7cb5ec",
drilldown: "mid",
y: 25
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#7cb5ec",
drilldown: "mid",
y: 677
}
]
}, {
id: 'mid2',
name: '2018-19',
data: [{
schoolLevel: "02",
schoolID_alt: "994",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "925",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "28",
color: "#ff6961",
drilldown: "mid2",
y: 37
},
{
schoolLevel: "02",
schoolID_alt: "930",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "933",
color: "#90ed7d",
drilldown: "mid2",
y: 80
},
{
schoolLevel: "02",
schoolID_alt: "936",
color: "#ff6961",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "917",
color: "#ff6961",
drilldown: "mid2",
y: 1
},
{
schoolLevel: "02",
schoolID_alt: "940",
color: "#fdfd96",
drilldown: "mid2",
y: 0
},
{
schoolLevel: "02",
schoolID_alt: "943",
color: "#ff6961",
drilldown: "mid2",
y: 35
},
{
schoolLevel: "02",
schoolID_alt: "904",
color: "#90ed7d",
drilldown: "mid2",
y: 6
},
{
schoolLevel: "02",
schoolID_alt: "113",
color: "#90ed7d",
drilldown: "mid2",
y: 625
}
]
}, {
id: 'high',
name: '2017-18',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#7cb5ec",
drilldown: "high",
y: 1322
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#7cb5ec",
drilldown: "high",
y: 604
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#7cb5ec",
drilldown: "high",
y: 553
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#7cb5ec",
drilldown: "high",
y: 12
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#7cb5ec",
drilldown: "high",
y: 725
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#7cb5ec",
drilldown: "high",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#7cb5ec",
drilldown: "high",
y: 52
}
]
}, {
id: 'high2',
name: '2018-19',
data: [{
schoolLevel: "03",
schoolID_alt: "995",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "926",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "11",
color: "#90ed7d",
drilldown: "high2",
y: 1079
},
{
schoolLevel: "03",
schoolID_alt: "80",
color: "#90ed7d",
drilldown: "high2",
y: 548
},
{
schoolLevel: "03",
schoolID_alt: "931",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "934",
color: "#ff6961",
drilldown: "high2",
y: 647
},
{
schoolLevel: "03",
schoolID_alt: "937",
color: "#ff6961",
drilldown: "high2",
y: 13
},
{
schoolLevel: "03",
schoolID_alt: "938",
color: "#ff6961",
drilldown: "high2",
y: 823
},
{
schoolLevel: "03",
schoolID_alt: "941",
color: "#fdfd96",
drilldown: "high2",
y: 0
},
{
schoolLevel: "03",
schoolID_alt: "944",
color: "#ff6961",
drilldown: "high2",
y: 81
},
{
schoolLevel: "03",
schoolID_alt: "905",
color: "#90ed7d",
drilldown: "high2",
y: 3
}
]
}]
},
exporting: {
scale: 2,
chartOptions: {
xAxis: [{
categories: categoriesElem,
min: 0,
max: categoriesElem.length
}]
}
},
credits: {
enabled: false
}
})
$(function() {
(function(H) {
//DATALABELS
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
var css = this.chart.options.drilldown.activeDataLabelStyle;
proceed.call(this);
css.textDecoration = 'none';
css.fontWeight = 'bold';
css.cursor = 'default';
css.color = 'black';
H.each(this.points, function(point) {
if (point.drilldown && point.dataLabel) {
point.dataLabel
.css(css)
.on('click', function() {
return false;
});
}
});
});
})(Highcharts);
})
And here's a link to the actual graph if that helps any: https://assessment.jefferson.kyschools.us/DMC/District%20Datacard/ddReferrals
Any help you could give would be greatly, greatly appreciated

Answer 1

You used Highcharts source code:
<script src="https://code.highcharts.com/highcharts.js"></script>
The scrollbar feature is available only for Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Live demo: https://jsfiddle.net/BlackLabel/a126pnxv/