Add Scroll Bar to Chart

[brunor]

Found this code on the forum and changed it slightly to widen the bars. This works well, but I would like to add a scroll bar for the x-axis.

--------------------------------------------------------------------------------------------------

<script src="https://code.jquery.com/jquery-3.2.1.js"></script><script>
$(document).ready(
function ()
{
var chart = Highcharts.charts[0];
chart.update(
{
plotOptions: {
        series: {
            pointPadding: 0, // Defaults to 0.1
            groupPadding: 0.01 //Defaults to 0.2
        }
    },
}
);
}
);
------------------------------------------------------------------------------------------------------

I can't figure out where to place this or if it's usable:

------------------------------------------------------------------

xAxis {

scrolbar: enabled: true

}
--------------------------------------------------------------------

Appreciate any assistance.

Thanks.

[alineer]

So, there's 2 ways to do this. The easiest one is to import Highstocks.js as well as Highcharts. The option for adding a scrollbar was added to Highstocks and you can make Highstocks draw a Highchart. If you go this route, just add:

xAxis: {
	scrollbar: {
		enabled: true;	
	}
}

to under the plotoptions object.

 

The other way to achieve this is set a min and max on the xAxis.

xAxis: {
  min: 0,
  max: 100 //or whatever you need this to be for your scroll
}