Highcharts: Adding extra text to legend

Question

Hi all I have a pie chart with the legend format like this:

{
    enabled: true,
    labelFormatter: function() {
        return  this.name + ' (Gesamt: ' + this.y + ' - '  + this.percentage.toFixed(1) + '%)' ;
    },
    borderWidth: 1
};

In some specific cases, I need to add an extra text which I defined as text = 'Extra' to this legend box. The rest legends I still keep them in the box. How can I do that ?

My jsfiddle code: http://jsfiddle.net/wjnnt28p/

Answer 1

You can add some if condition and display text like you want.

e.g.

labelFormatter: function() {
  var p = this.name + ' (Gesamt: ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)';
  if (this.name == 'Chrome') { // Test the name
    return p + ' Other Text for Chrome';
  } else {
    return p;
  }
}

Full example :

$(function () {

  $(document).ready(function () {

    var text = 'Extra';

    // Build the chart
    $('#container').highcharts({
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares January, 2015 to May, 2015'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true
        }
      },

      legend: {
        enabled: true,
        labelFormatter: function () {
          var p = this.name + ' (Gesamt: ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)';
          if (this.name == 'Chrome') { // Test the name
            return p + ' Other Text for Chrome';
          } else {
            return p;
          }
        },
        borderWidth: 1
      },

      series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
          name: 'Microsoft Internet Explorer',
          y: 56.33
        }, {
          name: 'Chrome',
          y: 24.03,
          sliced: true,
          selected: true
        }, {
          name: 'Firefox',
          y: 10.38
        }, {
          name: 'Safari',
          y: 4.77
        }, {
          name: 'Opera',
          y: 0.91
        }, {
          name: 'Proprietary or Undetectable',
          y: 0.2
        }]
      }]
    });
  });
});

<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/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 2

Update 2 fiddle with empty series,extra legend (Latest with datalabel enabled)

you are almost there, use this >> put a field like "extra" in your series data .

Updated

           labelFormatter: function() {
                  if(this.extra !=null){
                    return  this.name + ' ('+this.extra+': ' + this.y + ' - '                                                   + this.percentage.toFixed(1) + '%)' ;
                }else{
                   return  this.name + '(' + this.y + ' - '                                                     + this.percentage.toFixed(1) + '%)' ;
                }}

See the fiddle here

put a if condition to get rid of undefined .

As per comment below

create a empty series with the name "Extra" OR do like following

 labelFormatter: function() { if(this.y ==null) return "Extra Legend"; jsfiddle.net/wjnnt28p/4

the catch is , as you are formatting legend,if y don't have any value it will show undefined text. (Empty series case) for that write conditional logic there.

Second solution is to return "Extra label" but click of this legend won't have data,so legendclick could be override .