how to show legend in PIE chart from chart to pie drilldown highcharts

Question

I want to know how can i show legend for the pie chart, i currently done a column to pie chart drilldown but for the pie chart there is no legend and i want to know how can i put it? I tried putting legend = true but it is still not showing in the pie chart.

I have also tried:

pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true }

my code below:

 Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Chart showing the total vs match dialogs' }, xAxis: { type: 'category' }, yAxis: { title: { text: '' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, formatter: function () { var mychart = $('#container').highcharts(); var mytotal = 0; for (i = 0; i < mychart.series.length; i++) { if (mychart.series[i].visible) { mytotal = {!! $countTotalRecord['low confidence'] !!} + {!! $countTotalRecord['no answer'] !!} + {!! $countTotalRecord['missing intent'] !!} + {!! $countTotalRecord['webhook fail'] !!}; } } var pcnt = (this.y / mytotal) * 100; return Highcharts.numberFormat(pcnt) + '%'; } } } }, tooltip: { // headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '{point.name}: <b>{point.y}</b>' }, credits:{ enabled:false }, series: [{ name: 'front', colorByPoint: true, data: [{ name: 'Total', y: {!! $countTotalRecord['total'] !!}, drilldown: 'total' }, { name: 'Match', y: {!! $countTotalRecord['match'] !!}, drilldown: 'match' }] }], drilldown: { series: [{ name: 'total', id: 'total', type:'pie', data: [ [ 'Low Confidence', {!! $countTotalRecord['low confidence'] !!} ], [ 'No Answer', {!! $countTotalRecord['no answer'] !!} ], [ 'Missing Intent', {!! $countTotalRecord['missing intent'] !!} ], [ 'Webhook Fail', {!! $countTotalRecord['webhook fail'] !!} ] ] }] } }); 

Answer 1

You have to use

 events: {
  drilldown: function(e) {
    this.options.legend["enabled"] = true; //legend shows
  },
  drillup: function(e) {
    this.options.legend["enabled"] = false; //legend hides
  },

}

 // Create the chart Highcharts.chart('container', { chart: { type: 'column', events: { drilldown: function(e) { this.options.legend["enabled"] = true; }, drillup: function(e) { this.options.legend["enabled"] = false; }, } }, title: { text: 'Browser market shares. January, 2015 to May, 2015' }, subtitle: { text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' }, xAxis: { type: 'category' }, yAxis: { title: { text: 'Total percent market share' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } }, pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Microsoft Internet Explorer', y: 56.33, drilldown: 'Microsoft Internet Explorer' }, { name: 'Chrome', y: 24.03, drilldown: 'Chrome' }, { name: 'Firefox', y: 10.38, drilldown: 'Firefox' }, { name: 'Safari', y: 4.77, drilldown: 'Safari' }, { name: 'Opera', y: 0.91, drilldown: 'Opera' }, { name: 'Proprietary or Undetectable', y: 0.2, drilldown: null }], dataLabels: { enabled: false, } }], drilldown: { series: [{ type: 'pie', name: 'Microsoft Internet Explorer', id: 'Microsoft Internet Explorer', data: [ [ 'v11.0', 24.13 ], [ 'v8.0', 17.2 ], [ 'v9.0', 8.11 ], [ 'v10.0', 5.33 ], [ 'v6.0', 1.06 ], [ 'v7.0', 0.5 ] ] }, { type: 'pie', name: 'Chrome', id: 'Chrome', data: [ [ 'v40.0', 5 ], [ 'v41.0', 4.32 ], [ 'v42.0', 3.68 ], [ 'v39.0', 2.96 ], [ 'v36.0', 2.53 ], [ 'v43.0', 1.45 ], [ 'v31.0', 1.24 ], [ 'v35.0', 0.85 ], [ 'v38.0', 0.6 ], [ 'v32.0', 0.55 ], [ 'v37.0', 0.38 ], [ 'v33.0', 0.19 ], [ 'v34.0', 0.14 ], [ 'v30.0', 0.14 ] ] }, { type: 'pie', name: 'Firefox', id: 'Firefox', data: [ [ 'v35', 2.76 ], [ 'v36', 2.32 ], [ 'v37', 2.31 ], [ 'v34', 1.27 ], [ 'v38', 1.02 ], [ 'v31', 0.33 ], [ 'v33', 0.22 ], [ 'v32', 0.15 ] ] }, { type: 'pie', name: 'Safari', id: 'Safari', data: [ [ 'v8.0', 2.56 ], [ 'v7.1', 0.77 ], [ 'v5.1', 0.42 ], [ 'v5.0', 0.3 ], [ 'v6.1', 0.29 ], [ 'v7.0', 0.26 ], [ 'v6.2', 0.17 ] ] }, { type: 'pie', name: 'Opera', id: 'Opera', data: [ [ 'v12.x', 0.34 ], [ 'v28', 0.24 ], [ 'v27', 0.17 ], [ 'v29', 0.16 ] ] }] } }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 2

...
legend: {
    enabled: true
},
...