Budget Estimation with Scroll

author(s): Gopinagh.R

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="margin: 0 auto"></div>

JavaScript

var chart;
$(document).ready(function() {
    var width = $(document).width() - 20;
    var height = $(document).height() - 20;
    $("#container").css("width", width);
    $("#container").css("height", height);
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            zoomType: 'xy'
        },
        title: {
            text: 'Project wise Budget Estimation'
        },
        subtitle: {
            text: 'Select area to zoom.Click Reset Zoom to reset selection'
        },
        
        xAxis: {
            categories: ['VGP resort <br/>in (USD)', 'Spec info city <br/>in (USD)', 'Balewadi <br/>in (USD)', 'WTC <br/>in (INR)', 'Vizag Homes <br/>in (INR)', 'Aditi farms <br/>in (INR)'],
            min: 3

        },
        scrollbar: {
            enabled: true
        },

        yAxis: {
            min: 0,
            title: {
                text: 'Amount Distribution'
            }
        },
        legend: {
            shadow: true,
            y: -20
        },
        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
            }
        },
        series: [{
            name: 'Capital',
            data: [100000.00, 100000.00, 100000.00, 100000.00, 100000.00, 100000.00]},
        {
            name: 'Material',
            data: [0.00, 4357498.00, 0.00, 986000.00, 89158220.00, 0.00]},
        {
            name: 'HR',
            data: [36000000.00, 323360000.00, 80000.00,...