Budget Estimation with Scroll (Updated)

author(s): Gopinagh.R

by Chitkala More

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: 'Project wise Budget Estimation'
        },
        subtitle: {
            text: 'Select area to zoom.Click Reset Zoom to reset selection'
        },
        credits: {
            enabled: true,
            position: {
                align: 'right',
                x: -10,
                verticalAlign: 'bottom',
                y: -5
            },
            href: "http://www.qualiantech.com",
            text: "Qualian Technologies Pvt Ltd"
        },
        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
        },
        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]},
        {
  ...