Highcharts Demo

author(s): Torstein Hønsi

by sujay

HTML

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            events: {
                load: function(){
    var series = this.series, 
        i=0;
    
    for(; i<series.length; i++) {
        series[i].legendItem.translate(18, 0);
        series[i].checkbox.style.marginLeft = '-15px';
    }
}
            }
        },
        xAxis: {
            type: 'datetime'
        },
        legend: {
            symbolWidth: 0,
            //itemHiddenStyle:{color:"white"}
        },
        plotOptions: {
            series: {
                selected: true,
                showCheckbox: true,
                checkboxPosition: 'left',
                events: {
                    checkboxClick: function (event) {
                        this.setVisible(event.checked);
                    },
                    legendItemClick: function () {
                        return false;
                    }
                }
            }
        },

        series: [{
            "name": "a",
            "data": [null, {
                "dataLabels": {
                    "enabled": true,
                    "color": "b29e5c"
                },
                "color": "rgb(255,227,132)",
                "name": "a",
                "y": 59
            }, {
                "dataLabels": {
                    "enabled": true,
                    "color": "5a906c"
                },
                "color": "rgb(129,207,155)",
                "name": "a",
                "y": 128
            }],
            "type": "column"
        }, {
            "name": "b",
            "data": [{
                "dataLabels": {
                    "enabled": true,
                    "color": "b1635e"
                },
                "color": "rgb(254,142,135)",
                "name": "c",
                "y": 2
            },
            null, null],
            "type": "column"
        }]
    });
});