Render Chart and Legend Separately

plotly.js
1

I’m having real difficulty trying to render pie charts and their legends “nicely”, such that it looks good across a range of screen sizes.

What I’m looking for now is how to render charts and legends separately, in 2 different containers, with the idea that it will give me much more control over alignment. Something like:

Plotly.newPlot(chartContainer, params, layout, config);
Plotly.newPlot(legendContainer, params, layout, config);

I’m not sure if this is possible though? Is there some way to configure the layout or config to only render 1 of chart or legend?

2

Legends and labels are always tricky with responsive design so I can relate.

This would be a bit hacky, but you could have essentially two plots where one is just the chart and the other is the legend. Having no legend is straight forward, as for legendonly you can use the visible attribute: https://plot.ly/python/reference/#pie-visible.

The legend is not always critical in pie charts IMO since labels and hover templates go a long way, so in these situations I just cut it out.

3

Hi @mbkupfer, I hadn’t come across `visible: ‘legendonly’, so thanks for the tip :slight_smile:

Unfortunately though, the legend renders as a small, solid black square, and I’ve no idea why!

I made a jsfiddle to demonstrate a reproduction - any idea what is going on here?

4

That’s odd…might be a bug. I’ll try playing around with it when I have some free time today.

1 Like
5

I know I’m 2 years late to the party but… to hide that black square:
in your css put:
g.legend {
visibility: hidden;
}