Highcharts Demo

author(s): Torstein Hønsi

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>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total city sessions, grouped by browsers'
    },

    xAxis: {
      type: 'category',
      labels: {
        style: {
          color: '#707070',
          fontSize: '12px'
        },

      }
    },
    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Sessions'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'Delhi',
        data: [{'y':5,'name':'India'}],
        stack: 'Chrome'
    },{
        name: 'Punjab',
        data: [{'y':8,'name':'India'}],
        stack: 'Chrome'
    },{
        name: 'Punjab',
        data: [{'y':8,'name':'India'}],
        stack: 'Safari'
    },{
        name: 'Mumbai',
        data: [{'y':4,'name':'India'}],
        stack: 'Safari'
    },{
        name: 'New York',
        data: [{'y':8,'name':'USA'}],
        stack: 'Chrome'
    },{
        name: 'New York',
        data: [{'y':13,'name':'USA'}],
        stack: 'Firefox'
    },{
        name: 'San Francisco',
        data: [{'y':8,'name':'USA'}],
        stack: 'Firefox'
    },{
        name: 'Berlin',
        data: [{'y':5,'name':'Germany'}],
        stack: 'Firefox'
    },{
        name: 'GMY',
        data: [{'y':9,'name':'Germany'}],
        stack: 'Firefox'
    },{
        name: 'Berlin',
        data: [{'y':8,'name':'Germany'}],
        stack: 'Safari'
    },{
        name: 'GMY',
        data: [{'y':11,'name':'Germany'}],
        stack: 'Safari'
    }]
});