How to make highcharts scroll horizontally with a large range on the x axis

Question

I generate data on the x-axis and y-axis dynamically and displaying tall charts, but the chart becomes erratic when the range on the x-axis is high at small intervals.

How to make graphical charts for a normal horizontal scrollable chart?

Here is what I am using now:

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> //CODE FOR HIGHCHARTS JS function makeChart() { $('#container').highcharts({ chart: { type: 'line', marginRight: 130, marginBottom: 100 }, title: { text: 'Banana', x: -20 //center }, subtitle: { text: 'Source: banana.com', x: -20 }, xAxis: { categories: xlist }, yAxis: { title: { text: 'No. of C' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: 'C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: $("#repoSelector option:selected").text(), data: ylist }] }); } 

Answer 1

Two ways to achieve a scrollbar.

Option 1

You will need to use highstock.js , and instead of rendering a stock chart, you need to display highchart .

Then turn on the scroll bar

  scrollbar: { enabled: true } 

Check out the API for the scroll bar and related operations here .

here I took an example.

Option 2

Try setting the min and max attributes of the x-axis .

 xAxis: { categories: [...], min: 0, max:9 } 

Displays 10 categories along the X axis in a stretch, adding scrolling for the remaining categories. Find the example you are here .

Answer 2

To enable the x-axis scrollbar try this

 xAxis: { categories: xlist, min: 0, max: 4, scrollbar: { enabled: true }, }, 

Check out jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/

Also, make sure you import the highstock library

 src="https://code.highcharts.com/stock/highstock.js" 

Answer 3

using

 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> })