Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Annual precipitation'
    },

    subtitle: {
        text: 'Highcharts data labels with callout shape'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            dataLabels: {
               shape: 'connector',
                //backgroundColor: 'rgba(0, 0, 0, 0.75)',
                style: {
                    color: '#000000',
                    textOutline: ''
                }
            }
        }
    },

    series: [{
        data: [{
            y: 29.9,
            dataLabels: {
                enabled: true,
                shape: 'connector',
                format: 'January<br><span style="font-size: 1.3em">Dryest</span>',
                
                y: -34
            }
        }, {
            y: 71.5
        }, {
            y: 106.4
        }, {
            y: 129.2
        }, {
            y: 144.0
        }, {
            y: 176.0
        }, {
            y: 135.6
        }, {
            y: 148.5
        }, {
            y: 216.4,
            dataLabels: {
                enabled: true,
                format: 'September<br><span style="font-size: 1.3em">Wettest</span>',
                align: 'right',
                verticalAlign: 'middle',
                x: -35

            }
        }, {
            y: 194.1
        }, {
            y: 95.6
        }, {
            y: 54.4
        }]
    }]
});