Reputation: 1905
As mentioned here in this answer enabling scrollbars on a highchart axis is a fairly easy process of simply enabling following options:
You will need to use highstock.js
and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Try setting min
& max
attributes to the x-axis
.
xAxis: {
categories: [...],
min: 0,
max:9
}
one thing which is wrongly presented in the option 1, is that you have to perform one additional step of setting min/max as well, i.e. only enabling scrollbar isn't enough on its own.
The issue in my particular case is setting min and max, as the data is dynamic and its not possible to statically pre assign min and max.
Setting static max = 4 in this fiddle does solves the issue for the static data set but this doesn't works well when number of data points is less than 4, e.g. in this case:
Also in my particular case users can expand chart in a modal, which is supposed to be bigger and show more information when smaller cards/charts are not enough for showing large amount of data sets, e.g. as mocked in this demo. In this case max = 4 is enough for the original chart height but not when expanded because it has more empty spaces when max = 4. So it would be better if we don't exactly need to set max, Instead if we can allow scroll by setting only bar width like following that makes more sense.
pointWidth: 25
pointPadding: 0.2
but setting only this doesn't work in the above fiddle.
P.S scrolling is not exactly enabled in the above stackBlitz gif, but it should be working fine in the provided blitz demo.
Is there any way we can enable scrollbars and not have to set min or max instead only pointWidth or may be some thing else and have scroll work as expected?
Upvotes: 0
Views: 2316
Reputation: 39139
You need to use the max
property, but you can calculate and set it dynamically:
function setAxisMax() {
var pointWidth = this.series[0].options.pointWidth,
padding = 20;
this.update({
xAxis: {
max: this.plotHeight / (pointWidth + padding) - 1
}
}, true, true, false);
}
Highcharts.chart('container', {
chart: {
...,
events: {
load: setAxisMax
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/evmkqrcw/
API Reference: https://api.highcharts.com/highcharts/xAxis.max
Upvotes: 1