score:20

Accepted answer

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.

score:0

use 

require('highcharts/highmaps') instead of require('highcharts') in imports<br>
@ngmodule({<br>
    ...<br>
   imports: [<br>
    browsermodule, <br>
     chartmodule.forroot( <br>
      require('highcharts/highmaps')<br>
      ],<br>
})

score:1

add this

const highcharts = require('highcharts/highstock');

comment this if you have

// import highcharts from 'highcharts';

change xaxis to like this

xaxis : {
               categories: [],
                min:0,
                max:9,
                scrollbar: {
                    enabled: true
                }
            }

score:3

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"

Related Query

More Query from same tag