javascript - Highcharts Pie Missing Legend

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} 
{point.percentage:.1f}%'
  formatter: function() {
    return '' + this.point.name + ':
 ' + this.y.toLocaleString() + ' Facilities 
' + 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 + ':
 ' + this.percentage.toFixed(1) + ' %';
    }
  }
}]
  });
});