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.

Tags:

Highcharts