Highcharts Demo

author(s): Torstein Hønsi

by Jeremy Corson

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 by Manufacture'
        },
        xAxis: {
            categories: ['Toyota', 'Honda'] //['Prius', 'Corolla', 'Civic', 'Accord']
        },
        yAxis: {
            min: 0,
            stackLabels: {
                style: {
                    color: 'black'
                },
                enabled: false,
                formatter: function () {
                    return this.stack;
                }
            }
        },
        legend: {
            //enabled: false
        },
        credits: {
            enabled: false
        },

        series: [{
            name: 'Happy',
            id: 'Happy',
            stack: 'Corolla',
            color: 'blue',
            data: [20],
            pointPlacement: -0.4,
            dataLabels: {
                enabled: true,
                inside: false,
                formatter: function() {
                     return this.series.options.stack;   
                }
            }
        }, {
            id: 'Unhappy',
            name: 'Unhappy',
            stack: 'Corolla',
            color: 'black',
            data: [10],
            pointPlacement: -0.4
        }, {
            linkedTo: 'Happy',
            stack: 'Prius',
            color: 'blue',
            data: [30],
            pointPlacement: 0.0,
            dataLabels: {
                enabled: true,
                inside: false,
             ...