Highchart add a text under single bar in bar chart

Question

I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar

Code

var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
 chart: {
  type: 'bar', 
  backgroundColor: null,
  height: 270,
  events: {
    load: function() {         
      this.addSeries({
            data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
            enableMouseTracking: false,
            dataLabels: {
              useHTML: true,
              formatter:function() {
                var pcnt = (data[this.x].y / dataSum) * 100;
                return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
              }}
      }, true);
    }
  }
},
title: {
  text: ''
},
xAxis: {
  type: 'category',
  labels: {
    style: {
      width: '75px',
      'min-width': '75px',
      height: '42px',
      'min-height': '42px',
      align: 'high'
    },
    useHTML : true,
    formatter: function () {
                    return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
                },
  }
},
colors: colors,
yAxis: {
  min: 0,
  gridLineWidth: 0,
  title: {
    text: ''
  },
  gridLineWidth: 0,
  labels:
  {
    enabled: false
  }
},
credits: {
  enabled: false
},
legend: {
  enabled: false
},
plotOptions: {
  series: {
    borderWidth: 0,
    pointPadding: 0.25,
    groupPadding: 0,
    dataLabels: {
      enabled: true,
      crop: false,
      overflow: 'none'
    },
    colorByPoint: true
  }
},

tooltip: {
  headerFormat: '<span style="font-size:11px"> lorem</span><br>',
  pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},

series: [{
  data: data
}
        ]
 });

Output

Expected Output

How can I add a percentage under only a single bar?

Any help would be highly appreciated

score 1 · Accepted Answer · answered May 27 '21 at 08:14

1

You can use data labels configuration for a single point.

  events: {
    load: function() {
      this.addSeries(..., {
          x: 3,
          y: 1,
          dataLabels: {
            useHTML: true,
            formatter: function() {
              var pcnt = (data[this.x].y / dataSum) * 100;
              return '...';
            }
          }
        }]
      }, true);
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/

API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels

answered May 27 '21 at 08:14

ppotaczek

36,341
2
14
24

what if I don't want to use `datalabels`? For example, if i calculate the percentage and save it in a variable and then want to display it? Is there any method for doing this? – Moeez May 27 '21 at 08:20
Hi @Moeez, Sorry but I need more details. Why don't you want to use data labels? – ppotaczek May 27 '21 at 08:22
I am just a little bit curious. Just saying that if in case I have a string of a percentage value and want to add it without using data label – Moeez May 27 '21 at 08:56
Anyways I have accepted the answer as it has solved my problem. I have another [question](https://stackoverflow.com/q/67687804/6854117) related to it. Can you please look into it? – Moeez May 27 '21 at 09:01

Highchart add a text under single bar in bar chart

1 Answers1