I tried doing the
scrollbar: {
enabled: true
}
But it didnt work.
I tried using the highcharts.js that comes with highstocks..
A similar question has already been answer here.
You can refer to this: How to enable scrollbars in highcharts
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 6
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
If your code still doesn't work, you could try changing this :
<script type="text/javascript" src="js/highcharts.js"></script>
with this :
<script type="text/javascript" src="https://code.highcharts.com/stock/highstock.js"></script>
and you can add this :
scrollbar: {
enabled: true
},
finally, you can add this for how many data points you want to view at a time, example " min: 6 " :
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 6 <!-- LOOK at this -->
},
At the time of this answer, scrollbar can be added via highstock js. I managed to implement an elegant and simple scrollbar solution to my column chart, using only highcharts js, without highstock, as follows:
chart: {
type: 'column',
scrollablePlotArea: {
minWidth: {{ count($period_interval_categories) * 70}},
// nr of interval data x (40 + 30) where 40 are column width pixels and
// 30 is additional distancing between columns;
// Increase spacing pixels if needed
scrollPositionX: 1
}
},
plotOptions: {
column: {
stacking: 'normal',
pointWidth: 40, // column width in pixels
dataLabels: {
// enabled: true
}
}
},
where $period_interval_categories represents in my chart the period on x axis consisting of days, weeks, months, etc.