Legends overlap plotly graph

plotly.js
1

In my case, legends data are dynamic and I want to set the position of legends on top center of graph. It can be a single or more than 100 legends as well. So, I can not fix the height of graph container. Legends overlap graph if legends are more.

Is there any way to fix this issue by auto height like if legends are more then graph should increase it height to adjust accordingly?

Here is the link to reproduce: https://codepen.io/vijaythapak/pen/BYwErw

2 Likes
2

We don’t expose an auto-height option to would auto-expand your graphs div height to fit your legend items.

How are you dynamically adding these traces? I suspect using Plotly.addTraces? If so, I suggest adding something:

// get the number of traces
var N = gd.data.length
Plotly.relayout(gd, 'height', N * 200)

right after your addTraces call.

3

I do not add any traces at my front end. I always fetch traces from server in an array like below. It could be less or more. If data is more, legends overlap graph as shown in codepen example.

var traces = [
{
x: [0, 1, 2],
y: [0, 3, 6],
type: “scatter”,
name: “Plot scatter test test tste tse ts 1”
},
{
x: [0, 1, 2],
y: [0, 3, 6],
type: “scatter”,
name: "Plot scatter test test tste tse ts 1 "
}]

4

Facing the same issue

+1

5

I am facing the same problem.

6

also facing the same problem, and it’s really hampering my dash UI. there is the work-around of setting the legend ‘x’ and/or ‘xanchor’ property, but this is particularly problematic in dash apps where div width’s are changing fluidly. the graph itself will scale as it needs to, but the legend remains fixed at the same width (rather than using a horizontal scrollbar); at some point it just takes over the entirety of the graph.

i recently tried to solve this with css although i’m skeptical of using css to mess with the layout of an actual plotly figure. i’m new to html and css so please excuse my likely poor terminology.

legend css seems to be inherited via the following classes: infolayer>legend>bg>scrollbox. i haven’t had any luck changing any of these properties, including setting ‘overflow-x’ property of the scrollbox. it works sometimes but not always or reliably, and it also seems that once i inject css into the plotly figure, a lot of the interactivity starts to get wonky (i.e., you can no longer click on legend entries to toggle traces on/off)

has anyone had any luck with this workaround? it seems like it should be an easy fix, just in terms of allowing the legend to resize as well as the plot.

7

Similar issue, but the problem is that with different browsers (mobile vs PC), the legends take up different amounts of space, so when I am adjusting height based on browser window size, it’s unpredictable how much the legends will overlap. On my tablet, the entire chart is overlapped by legends.

8

Hey , I have same issue :smile:
is there any solution ?

9

Following @etienne’s tip, why not using something like:

var layout = {
	height: 10*data.length,
	showlegend: true,
	legend: {
		orientation: "h",
		xanchor: "center",
		yanchor: "bottom",
		y: 1.0,
		x: 0.5
	}
};