add text under the bar with plotOptions highchart (BAR)

Question

hi i try to add extra text on plotOptions datalabels for each bar. i get the value i want, but i cant position it to under the bars.

my code

    plotOptions: {
           series: {
               dataLabels: {

                 useHTML: true,
                  formatter:function() {
                     var pcnt = (this.y / dataSum) * 100;
                        return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + this.point.name + ' this i want put under the bar' + '</span>';
                 }}
           }
    }

i try to not using datalabels from xasix cause i want to show it too. how to make the extra text to located under of each bar?

if anybody have another suggestion beside using plotoptions im okay with that. thank you.

heres the link

Answer 1

You could do this by using the outside data array you defined and adding a fake series, like this:

chart: {
  ...,
  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);
    }
  }
}

Not pretty but it works. Of course you could get rid of the outside data reference if you wanted, by looping through the chart. And in the same manner you could remove the need to create a static data set for the second series.

  var data = [
    {
      name: 'item 1',
      y: 1756,
      fontWeight: 'bold',
      
    },{
      name: 'item 2',
      y: 512,
      fontWeight: 'bold',
      
    },{
      name: 'item 3',
      y: 756,
      fontWeight: 'bold',
      
    },
    {
      name: 'item 4',
      y: 956,
      fontWeight: 'bold',
      
    }
  ]


  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
    }
            ]
  });    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src=https://code.highcharts.com/modules/drilldown.js></script>
<div id="highchart" style="height: 400px"></div>

Working example jsfiddle: https://jsfiddle.net/zjxp57n6/4/

Answer 2

You won't be able to do that with data labels without hacking Highcharts.

I suggest you take a look at the Annotations module. You can position labels anywhere on the chart and customize how they look.

Regards