Highcharts Pie Missing Legend

Question

How can I get the pie chart's legend to show up given I'm creating my chart as follows?

I'm generating my highcharts pie data in C# and outputting a serialized JSON string to my .axpx page like so:

 plotOptions: {
        pie:
            <%=piechartData%>
    },

Here is a fiddle of the Pie Chart after the .aspx.cs code runs. The chart looks like I want it but still no legend Pie No Legend

The entire output looks like this when I view the source of the .aspx page

$(function() {

var myChart = Highcharts.chart('pieContainer', {

credits: {
  enabled: false
},

title: {
  text: ''
},

legend: {
  labelFormatter: function() {
    return this.rowData.name;
  }
},

tooltip: {
  followPointer: true,
  hideDelay: 100,
  //pointFormat: 'Facilities: {point.y:,.1f} <br>{point.percentage:.1f}%'
  formatter: function() {
    return '<b>' + this.point.name + ':</b><br/> ' + this.y.toLocaleString() + ' Facilities <br/>' + this.percentage.toFixed(1) + ' %';
  }
},

plotOptions: {
  pie: {
    "data": [{
      "y": 6708,
      "name": "Targeted",
      "sliced": false,
      "selected": false,
      "color": "#FF5733",
      "showInLegend": true
    }, {
      "y": 24622,
      "name": "Non-Targeted",
      "sliced": true,
      "selected": true,
      "color": "#D4D3D2",
      "showInLegend": true
    }, {
      "y": 4057,
      "name": "Participating",
      "sliced": false,
      "selected": false,
      "color": "#3EA457",
      "showInLegend": true
    }]
  }
},

series: [{
  type: 'pie',
  name: 'Outside Name',
  dataLabels: {
    enabled: true,
    connectorWidth: 1,
    distance: 25,
    style: {
      color: "contrast",
      fontSize: "11px",
      textOutline: "none", //"1px contrast",
    },
    formatter: function() {
      return this.point.name + ':<br/> ' + this.percentage.toFixed(1) + ' %';
    }
  }
}]
  });
});

Answer 1

There are 3 problems here:

---

How you are adding the data: You should set the data in series , and not in plotOptions . So it should be:

series: {
  data: [...]
  ...
}

---

Where you are setting showInLegend : series.data does not have an attribute showInLegend , that needs to be set per series or in plotOptions . That is:

plotOptions: {
  pie: {
    showInLegend: true
  }
}

---

The way you are formatting the legend formatter is not valid. There is no property this.rowData.name , so I just removed this.

---

By doing the above, and also moving the dataLabels options we get the following working example: https://jsfiddle.net/sk0tpegp/19/