Display two labels, one inside and one outside, for bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

Display two labels, one inside and one outside, for 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"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var data = [7, 12, 16, 32];//from w  w w .  ja  va  2  s.c  o m
var dataSum = 0;
for (var i = 0; i < data.length; i++) {
  dataSum += data[i]
}
var data2 = [5, 19, 14, 13];
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'category',
  },
  yAxis: {
    min: 0,
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        color: "black",
        style: {
          textOutline: false
        }
      }
    }
  },
  series: [{
    name: 'first',
    data: data,
    dataLabels: {
      y: 20,
      enabled: true,
      formatter: function() {
        var pcnt = (this.y / dataSum) * 100;
        return Highcharts.numberFormat(this.y , 0) +'<br>'+Highcharts.numberFormat(pcnt) + '%';
      }
    }
  }, {
    name: 'Second',
    data: data2,
  }]
});

      </script>  
   </body>
</html>

Related Tutorials