enable scroll for high chart,high stock

Question

I am trying to plot a chart which has monthly renewal amount at irregular intervals. By default, I should show up 18 months data with a scroll bar enabled to show up after 18 months. On hover of point there should be a tool tip coming with data related to that point, other than x and y values. Here, I have tried using tooltip but failed loading graph. Here is the jsfiddle. I have tried doing some stuff from online but no luck. Any solution would be great help.

reference:-

highchart

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Script:

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',zoomType: 'xy',
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: ' '
        },
         scrollbar: {
        enabled: true,

    },
        xAxis: {
        ordinal: false,
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'renewal ammount(in Mn)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{

            name: '0-1',

            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        }, {
            name: '1-2',
            data: [

            [Date.UTC(2016,07,16),1.3],[Date.UTC(2018,06,18),1.3,,ww:'mydata'],[Date.UTC(2019,06,19),1.3,ww:'mydata'],[Date.UTC(2016,12,16),1.3,ww:'mydata'],[Date.UTC(2016,06,16),1.3,ww:'mydata'],[Date.UTC(2016,02,16),1.3,ww:'mydata'],         



            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '2-3',
            data: [

            [Date.UTC(2017,05,17),2.9],[Date.UTC(2016,03,16),2.1],[Date.UTC(2018,06,18),2.1],           



            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '3-4',
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '4-5',
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        },]
    });
});

Answer 1

Just for clarification: scrollbar works with highstock.

how to use it?

1. <script src="https://code.highcharts.com/stock/highstock.js"></script>
2. add scrollbar
3. add "min:XX" under xAxis

Check : http://jsfiddle.net/mushigh/xjearL2z/

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>  

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


$(function() {
  $('#container').highcharts({


    chart: {
      type: 'line',
      zoomType: 'xy',
    },
    scrollbar: {
      enabled: true,
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      min: 8
    },

    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });
});