How does 'min' 'max' works in Highcharts? I can't get the scrollbar to work

Question

So I have a huge array of data and I'm using Highcharts's Heatmap . However I can't get the scrollbar to work, it let me scroll the whole page instead of letting me scroll inside the container. Picture :

I looked around and found out that it had something to do with min and max properties. But I have no idea how it's suppose to works, I tried messing with it after read the documentation but no luck so far.

Here's my JSFiddle : http://jsfiddle.net/ngendk2o/9/

Any help will be appreciated. Thanks

Answer 1

The command suppose to be:

scrollbar: {
    enabled: true
}

Additional you have to set the xAxis.max visible columns on the x axis.

xAxis: {
    max: 7  // herewith you define the width 
}

Also your chart.width blocks the scrolling as it is defined over the total length, don't use it!

    // width: data.length * 3,

See the modified jsfiddle here .