Pie chart call-outs fall behind legend

plotly.js
1

I have pie charts with the legend to the right. If there are call-outs for small segments on the right, then they fall behind the legend text.

Is there a way to increase the distance between the pie and the legend so that the call-outs are visible? Or could the size of the pie-circle be fixed to achieve this?

I managed to force this by making the overall chart very wide, but not very high. But then legend items scroll if there are too many and call-outs are cut off if there are too many, so I am dynamically adjusting the height of the chart depending on how many call-outs and traces I have. If I make that fit, then the circle expands, making the gap between circle and legend too narrow again…

I also tried rotating the chart so that call-outs always are on the left initially, but hey may still end up at the right if users switch traces on or off.

Sample chart:

<div id=”chartContainer”></div>
<script>  var chartData = [{
                        values: [25,0,0,0,0,0,0,25,25,0,25,0,0,0,0,0],
                        labels: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'],                  
                        type: 'pie'
                    }];
                    var layout = {
                        height: 589,
                        width: 440,                        
                        margin: {
                            l: 60,
                            r: 220,
                            b: 40,
                            t: 40,
                            pad: 1
                        }
                    };

                    Plotly.newPlot('chartContainer', chartData, layout, {  displayModeBar: false });
</script>
2

Our auto-margin algorithm should have taken care of this, but unfortunately it doesn’t consider the pie chart call-outs at the moment.

So, to do so, you’ll need to specify the legend position manually: http://codepen.io/etpinard/pen/jqvxxm

I hope this helps.

3

This is perfect, thanks.

Couldn’t figure out how to do this from the documentation.