How to make highcharts scrollable horizontally when having big range in x-axis
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
Two ways to achieve a scroll bar.
Option 1
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
}
Check the API for scroll bar and related operations here
.
Here
I have fiddled an example.
Option 2
Try setting min
& max
attributes to the x-axis
.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here
.