Data Label Outside Plot_Demo

by mhardik

HTML

<div id="container" style="height: 400px; width: 600px"></div>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

<button id="button">Set extremes</button>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter'
    },
    yAxis: {
        stackLabels: {
            enabled: true
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                align: 'center',
    y: -3,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#AAA',
    style: {
        color: '#FFFFFF',
        font: '10px Verdana, sans-serif'
    },
                color: 'black'
            },
           // stacking: 'normal'
        }
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});


$('#button').click(function () {
    chart.xAxis[0].setExtremes(1, 10.9);
});