Highcharts Demo

author(s): Torstein Hønsi

by arielkotch

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar', 	     
        marginLeft: 160
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: [
            'Ayco  321  Broadway', 
            'Ayco  8  Campus  Drive', 
            'Ayco One Wall',
            'Birger Jarlsgatan 12', 
            'Bridgewater Data Center',
            'CC2',
            'Cherry Hills',
            'Cheung Kong Centre',
            'Chicago Board of Trade',
            'Chicago Mercantile Exchange Data Center'
        ],
        max:9,
        labels:{
            style:{
                fontSize:'11px',
                fontWeight:100
            }
        }
        
    },
    yAxis: {
        min: 0,
        gridLineColor: 'transparent',
        title: {
            text: 'Energy [MBtu]'
        }
    },
    legend: {
        reversed: true,
        x:70
    },
    plotOptions: {
        series: {
            stacking: 'normal'    
        }
    },
    series: [{
        name: 'Electricity',
        data: [9, 10, 8, 11, 8, 7, 12, 10, 8, 7],
        color:'#1F2C5C',
        borderWidth:0,
        index:3
    }, {
        name: 'Gas',
        data: [13, 15, 14, 12, 17,15, 16, 14, 17, 18],
        color:'#3F58CE',
        borderWidth:0,
        index:2,
    }, {
        name: 'Oil',
        data: [18, 23,20, 24, 22,21, 20, 19, 23, 22],
         color:'#6BD2D6',
         borderWidth:0,
        index:1
    },{
        name: 'Steam',
        data: [25, 34, 45, 42, 46, 41, 50, 49, 43, 51],
        color:'#06A1F9',
        borderWidth:0,
        index:0    
            
    }]
});