CODEWITHSUNDEEP
javascripthighchartsdata-visualization
Gunjan
Gunjan

Reputation: 2805

Display two labels for each bar in highcharts(one inside and one outside)

I wanted to display two labels on bars. I am able to display one label right now. I want something like this.

enter image description here

Instead I am getting like thisenter image description here

The code snippet which I am using to show the labels is

plotOptions: {

                            column: {
                                dataLabels: {
                                    enabled: true,
                                    color: "black",
                                    style: {
                                        textOutline: false
                                    }
                                }
                            }
                        }

how Can I show these percentage value on the bars? Thanks in Advance.

Upvotes: 1

Views: 1441

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

For placing label with percentage inside the particular column you should give dataLabels inside that series, for rest of the column use common dataLabels as defined by you in plotOptions. Below code is for idea only Fiddle link

var data = [7, 12, 16, 32];
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, /*for placeing lables values inside column*/
      enabled: true,
      formatter: function() {
        var pcnt = (this.y / dataSum) * 100;
        return Highcharts.numberFormat(this.y , 0) +'<br>'+Highcharts.numberFormat(pcnt) + '%';
      }
    }
  }, {
    name: 'Second',
    data: data2,
  }]
});

Upvotes: 2

Related Questions