pie chart legend overlap with older legend when replace series in highchart

Question

I am trying to update a pie chart but the problem is its overlapping with legends which is causing an issue. I am remove default series and add new series then old legend is not hide and new legend overlap. following is my code :

<script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="height: 300px"></div>
    <button id="update">Update chart</button>

    $(function () {
        $('#container').highcharts({
chart: {
            animation: {
                duration: 1000
            },
            type:'pie'
        },
    plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: false,
                  format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
              }
            },
series: [{
            name: 'Brands',colorByPoint: true,
            data: [
              { name: 'Data1', y: 60.40,},
              {name: 'Data2', y: 39.60,},
            ]
          }]
    });

    var i = 1;
    $('#update').click(function () {
        var chart = $('#container').highcharts();
        var newData =[{ name: 'ABC', y: 80 },{ name: 'XYZ',
                        y: 20,}];
 while (chart.series.length > 0)
                chart.series[0].remove(true);

            let series={
                name:'new Load',
                data:newData
                }
             chart.addSeries(
                  series, false
              );
      chart.redraw()

    });
    });

You need to destroy previous chart using destroy() method before building new one — R.K.Saini
@R.K.Saini same code for other chart like line, there legend not overlap but in pie chart legend ovelap — Abhijit Patil

ppotaczek ppotaczek · Accepted Answer · 2019-12-19T10:58:15

That is a regression bug in Highcharts, which is reproted here: https://github.com/highcharts/highcharts/issues/12627 It is already fixed on the master branch.

To workaround use code from master branch or add this plugin:

(function(H) {
    H.wrap(H.Point.prototype, 'destroy', function(proceed) {
        if (this.legendItem) { // pies have legend items
            this.series.chart.legend.destroyItem(this);
        }
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

pie chart legend overlap with older legend when replace series in highchart

1 Answers