Highcharts pie rendering in conflict with legend

1
votes

I have an example of a Highcharts pie with a top positioned legend.

    legend: {
        layout: 'horizontal',
        verticalAlign: 'top'
    }

http://jsfiddle.net/wt4rqudh/1/

There is an addSeries button in the demo which adds an inner pie chart. Because this adds more rows to the legend, the pie rendered is pushed down resulting in an incorrect behaviour.

Does anyone know how to fix this? The legend position must remain the same.

2
javascriptchartshighcharts
What is the desired behavior? What do you want to happen to the legend? – Halvor Holsten Strand
@Ondkloss As I mentioned above the new pie being rendered is pushed down (is not aligned with the previous pie due to the legend.) that is what I want to fix – andrei
So you still want the new legend items to appear as they do now? Ok. – Halvor Holsten Strand

2 Answers

1
votes

A method that makes this look somewhat smooth is:

  1. Doing the chart.addSeries, but without redrawing
  2. Doing an update on the original series, still not redrawing
  3. Do a chart.redraw() to position both series

In code this looks something like this:

chart.addSeries({
    // Series attributes ...
}, false);
chart.series[0].update(null, false);
chart.redraw();

See this JSFiddle demonstration of how it looks.

1
votes

Because you're adding series, old one never get removed, so you basically get multiple pie charts on one chart.

Before you add new series you must remove old one:

 $('#button').click(function () {
    var chart = $('#container').highcharts();
    chart.series[0].remove();
    chart.addSeries({
        size: '70%',
        innerSize: '50%',
        data: []
    });
});

Demo: http://jsfiddle.net/7sopburu/.