Highcharts add export legend

Question

I am trying to add a legend to a pie when exporting a chart to PNG. Here is my code:

var chart_23_106; $(document).ready(function () { chart_23_106 = new Highcharts.Chart({ chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'NRJ' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 }, plotOptions: { pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } } }, colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'], credits: { enabled: false, text: "Source: Air Normand", href: "" }, exporting:{ buttons: { printButton: {enabled:false}, exportButton: {menuItems:null,onclick:function(){this.exportChart(null, { chart: {reflow: false, width: 400}, title: {text: "Répartition de la Consommation"}, subtitle: {text: "Haute-Normandie"}, plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}}, credits: {enabled: true} } );}} }}, lang: {exportButtonTitle: "Export image au format PNG"}, series: [{ type: 'pie', name: 'Proportion', data: [ ['Activite 1', 684.6], ['Activite 2', 564.7], ['Activite 3', 244.4], ['Activite 4', 42.8], ] }] }); }); 

In the exportChart function, everything except the plotOptions parameters gives the correct effect. In the PNG file, the name changes, subtitles and credits are added, but the Labels data and the legend are not displayed ...
Does anyone know why? Can anyone help me? Thanks

Answer 1

Yes, it is possible by turning off the legend in the diagram and exporting the parameters ( http://api.highcharts.com/highcharts#exporting.chartOptions ) set this parameter as active.

Working example: http://jsfiddle.net/xvQNA/

 var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 }, legend:{ enabled:false }, exporting:{ chartOptions:{ legend:{ enabled:true } } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', showInLegend:true, data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); 

Answer 2

you just have to add enable: true to dataLabels:

  plotOptions: { series: { dataLabels: { enabled: true, } } }