Highstock dual x-axis with scrollbar - highcharts

Question

I have a chart with the dual x-axis and grouped categories as labels and I need a working scrollbar. I have tried multiple ways of how to achieve that but I am not successful so far... This is the nearest I have gone, there are 10 "rows" from which I have displayed 5, there is a scrollbar, but I cannot move the scrollbar.
var count = 10;
var dataArray = [];
for (var i = 0; i < count; i++) {
dataArray[i] = [i + 1, i + 2, i + 3, i + 4, i + 5];
}
var categories1Array = [];
for (var i = 0; i < count; i++) {
categories1Array[i] = i + 1;
}
var categories2Array = [];
for (var i = 0; i < count; i++) {
categories2Array[i] = {
name: "3rd",
categories: [{
name: "2nd",
categories: ['1st']
}]
};
}
Highcharts.chart('container', {
chart: {
inverted: true
},
series: [{
type: 'boxplot',
data: dataArray,
showInLegend: false
}],
xAxis: [{
categories: categories1Array,
max: 4,
gridLineWidth: 1
},
{
opposite: true,
linkedTo: 0,
categories: categories2Array,
max: 9,
scrollbar: {
enabled: true
},
labels: {
formatter: function() {
return `<div style="width:30px">${this.value}</div>`;
},
useHTML: true
}
},
],
credits: {
enabled: false
},
title: {
text: null
},
yAxis: {
title: {
text: null
}
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 300px;
margin: 0 auto
}
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container"></div>
Any ideas?

Answer 1

You need to add a scrollbar to the first xAxis. See: https://jsfiddle.net/wchmiel/vrheuwqc/
xAxis: [{
categories: categories1Array,
max: 4,
gridLineWidth: 1,
scrollbar: {
enabled: true
}
}, {
opposite: true,
linkedTo: 0,
categories: categories2Array,
min: 0,
max: 9,
labels: {
formatter: function() {
return `<div style="width:30px">${this.value}</div>`;
},
useHTML: true
}
}]
To align scrollbar to the right side of the chart overwrite H.Scrollbar.prototype.position function and add there an additional offset:
(function(H) {
H.Scrollbar.prototype.position = function(x, y, width, height) {
var scroller = this,
options = scroller.options,
vertical = options.vertical,
xOffset = height,
yOffset = 0,
method = scroller.rendered ? 'animate' : 'attr',
customOffset = 133;
scroller.x = x;
scroller.y = y + this.trackBorderWidth;
scroller.width = width; // width with buttons
scroller.height = height;
scroller.xOffset = xOffset;
scroller.yOffset = yOffset;
// If Scrollbar is a vertical type, swap options:
if (vertical) {
scroller.width = scroller.yOffset = width = yOffset = scroller.size;
scroller.xOffset = xOffset = 0;
scroller.barWidth = height - width * 2; // width without buttons
scroller.x = x = x + scroller.options.margin;
} else {
scroller.height = scroller.xOffset = height = xOffset =
scroller.size;
scroller.barWidth = width - height * 2; // width without buttons
scroller.y = scroller.y + scroller.options.margin;
}
// Set general position for a group:
scroller.group[method]({
translateX: x + customOffset, // add additional offset here
translateY: scroller.y
});
// Resize background/track:
scroller.track[method]({
width: width,
height: height
});
// Move right/bottom button ot it's place:
scroller.scrollbarButtons[1][method]({
translateX: vertical ? 0 : width - xOffset,
translateY: vertical ? height - yOffset : 0
});
}
})(Highcharts);
Demo:
https://jsfiddle.net/wchmiel/9yf58pd6/