向下钻取饼图上的图例重叠

Question

I am using Highcharts drill down pie charts with a bottom legend. Upon drilldown, the legend overlaps and when reverting one level back, it even gets worse.

This is happening even on the Highcharts demo chart. Look at this example - click on Chrome or any other element to see the problem - https://jsfiddle.net/2679a3ru/1/ .

Is there a setting that I am missing?

Highcharts.chart('container',{chart:{type:'pie'},title:{text:'Browsermarketshares.January,2018'},subtitle:{text:'Clicktheslicestoviewversions.Source:<ahref="http://statcounter.com"target="_blank">statcounter.com</a>'},accessibility:{announceNewData:{enabled:true},point:{valueSuffix:'%'}},plotOptions:{pie:{showInLegend:true,},series:{dataLabels:{enabled:false,format:'{point.name}:{point.y:.1f}%'}}},tooltip:{headerFormat:'<spanstyle="font-size:11px">{series.name}</span><br>',pointFormat:'<spanstyle="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}%</b>oftotal<br/>'},series:[{name:"Browsers",colorByPoint:true,data:[{name:"Chrome",y:62.74,drilldown:"Chrome"},{name:"Firefox",y:10.57,drilldown:"Firefox"},{name:"InternetExplorer",y:7.23,drilldown:"InternetExplorer"},{name:"Safari",y:5.58,drilldown:"Safari"},{name:"Edge",y:4.02,drilldown:"Edge"},{name:"Opera",y:1.92,drilldown:"Opera"},{name:"Other",y:7.62,drilldown:null}]}],drilldown:{series:[{name:"Chrome",id:"Chrome",data:[["v65.0",0.1],["v64.0",1.3],["v63.0",53.02],["v62.0",1.4],["v61.0",0.88],["v60.0",0.56],["v59.0",0.45],["v58.0",0.49],["v57.0",0.32],["v56.0",0.29],["v55.0",0.79],["v54.0",0.18],["v51.0",0.13],["v49.0",2.16],["v48.0",0.13],["v47.0",0.11],["v43.0",0.17],["v29.0",0.26]]},{name:"Firefox",id:"Firefox",data:[["v58.0",1.02],["v57.0",7.36],["v56.0",0.35],["v55.0",0.11],["v54.0",0.1],["v52.0",0.95],["v51.0",0.15],["v50.0",0.1],["v48.0",0.31],["v47.0",0.12]]},{name:"InternetExplorer",id:"InternetExplorer",data:[["v11.0",6.2],["v10.0",0.29],["v9.0",0.27],["v8.0",0.47]]},{name:"Safari",id:"Safari",data:[["v11.0",3.39],["v10.1",0.96],["v10.0",0.36],["v9.1",0.54],["v9.0",0.13],["v5.1",0.2]]},{name:"Edge",id:"Edge",data:[["v16",2.6],["v15",0.92],["v14",0.4],["v13",0.1]]},{name:"Opera",id:"Opera",data:[["v50.0",0.96],["v49.0",0.82],["v12.1",0.14]]}]}});

Answer 1

It is a bug which is already reported and fixed.

Link for more information: https://github.com/highcharts/highcharts/issues/12627

It works fine on the master branch, see: https://jsfiddle.net/BlackLabel/cym534k7/

<script src="https://github.highcharts.com/master/highcharts.js"></script>
<script src="https://github.highcharts.com/master/modules/drilldown.js"></script>