Highcharts Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px"></div>
<script src="http://github.highcharts.com/highcharts.js"></script>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        plotOptions: {
            series: {
                //grouping: false,
                stacking: 'normal',
                pointPadding: 0.2,
                allowPointSelect: true,
                states: {
                    select: {
                        color: null,
                        borderWidth: 5,
                        borderColor: 'Blue'
                    }
                }
            }
        },
        title: {
            text: 'Aggregate count of Happiness infusions by Manufacture'
        },
        xAxis: {
            categories: ['Toyota', 'Honda'] //['Prius', 'Corolla', 'Civic', 'Accord']
        },
        yAxis: {
            min: 0,
            stackLabels: {
                style: {
                    color: 'black'
                },
                enabled: true,
                formatter: function () {
                    return this.stack;
                }
            }
        },
        legend: {
            //enabled: false
        },
        credits: {
            enabled: false
        },

        series: [{
            name: 'Happy',
            id: 'Happy',
            stack: 'Corolla',
            color: 'blue',
            data: [20, 30],
        }, {
            id: 'Unhappy',
            name: 'Unhappy',
            stack: 'Corolla',
            color: 'black',
            data: [10, 30],
        }, {
            linkedTo: 'Happy',
            stack: 'Prius',
            color: 'blue',
            data: [30, 30],
        }, {
            linkedTo: 'Unhappy',
            stack: 'Prius',
            data: [30, 30],
            color: 'black',
        }]
    });
});