Budget Estimation with Scroll (Updated)

author(s): Gopinagh.R

by instakarlo

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

JavaScript

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

    chart: {
      renderTo: 'container',
      defaultSeriesType: 'column',
      zoomType: 'xy'
    },
    title: {
      text: ''
    },
    "yAxis": [{
        "labels": {
          "format": "{value}"
        },
        "title": {
          "text": "Number of Hand-Off"
        }
      },
      {
        "title": {
          "text": "Average Hand-Off time"
        },
        "labels": {
          "format": "{value}"
        },
        "opposite": true,
        "min": 0
      }
    ],
    xAxis: {
      categories: [
        "2017-07",
        "2017-08",
        "2017-09",
        "2017-10",
        "2017-11",
        "2017-12",
        "2018-01",
        "2018-02",
        "2018-03",
        "2018-04",
        "2018-05",
        "2018-06"
      ],
      min: 4

    },
    scrollbar: {
      enabled: true
    },
    tooltip: {
      useHTML: true,
      headerFormat: '<small>{point.key}</small><table>',
      pointFormat: '<tr><td style="color: {series.color}">{series.name}:{point.y} </td>',
      footerFormat: '</table>',
      valueDecimals: 2,
      crosshairs: [{
          width: 1,
          color: 'Gray'
        },
        {
          width: 1,
          color: 'gray'
        }
      ]
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0.5
      }
    },
    rangeSelector: {
      buttons: [{
        type: 'week',
        count: 6,
        text: 'week',
        events: {
          click: function() {
            console.log(this);
          }
        }
      }, {
        type: 'all',
        count: 1,
        text: 'All',
        events: {
          click: function() {
            console.log(this);
          }
        }
      }],
      selected: 2,
      inputEnabled: false,
      enabled: true
    },
    series: [{
        "name": "Number of Hand-Off",
        "yAxis": 0,
        "type": "column",
        "data": [
          53,
          62,
          66,
         ...