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

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. 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