move dataLabels to the border of the plot area in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

Description

move dataLabels to the border of the plot area in bar chart

Demo Code

ResultView the demo in separate window

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from  ww w  .  j a v  a2 s. c om*/
    var cat = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']; //, 'Sep', 'Oct', 'Nov', 'Dec', 'foo', 'bar', 'bla'];
    var barWidth = 16;
    chart = new Highcharts.Chart({
        chart: {
            type: "bar",
            renderTo: 'container',
            events: {
                load: function() {
                    var plotHeight = this.plotHeight,
                        chart = this,
                        width = chart.plotWidth;
                    var catWidth = (barWidth-2) / (2*plotHeight/cat.length);
                    var plot = [];
                    for(var i=0; i<(cat.length); i+=1) {
                        var newPlot = {
                            color: 'grey',
                            width: 1,
                            value: i+catWidth //+(cat.length/($('#container').height()/10))
                        };
                        plot.push(newPlot);
                        this.xAxis[0].addPlotLine(newPlot);
                    }
                    $.each(chart.series[0].data, function(i,d){
                        var bbox = d.dataLabel.getBBox().width;
                        d.dataLabel.attr({
                            x:  width - bbox
                        });
                    });
                }
            }
        },
        title: {
            text: null
        },
        credits: {
            text: null,
            enabled: false
        },
        xAxis: {
            categories: cat,
            title: {
                text: null,
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null,
                enabled: false
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            gridLineColor: 'none'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    color: '#000',
                    formatter: function() {
                        return Math.abs(this.y).toFixed(1) + '%';
                    },
                }
            }
        },
        series: [{
            data: [2.9, 7.5, 10.4, 12.2, 14.0, 17.0, 13.6, 14.5], //, 21.4, 19.1, 9.6, 5.4, 9.9, 9.9, 9.9],
            pointWidth: barWidth
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 450px; width: 450px;"></div>  
   </body>
</html>

Related Tutorials