CODEWITHSUNDEEP
plotly.js
kroky
kroky

Reputation: 1316

plotly.js legend overlap the graph

Please see example screenshot - I cannot reproduce except on this site, it seems to be some conflict with the css but any ideas what?

Normally, plotly moves the legend at the top if there is not enough horizontal space. However, this example shows that the legend overlaps the graph. Even if I make the legend orientation horizontal, it still overlaps the graph.

Do you have any ideas why it could happen?

enter image description here

Upvotes: 3

Views: 8341

Answers (3)

Crashdomi
Crashdomi

Reputation: 51

Adjusting the legend position in normalized coordinates should help. See also here. I.e.:

layout = go.Layout(
     legend={"x" : 1.2, "y" : 1}
)

Upvotes: 5

Marciolegal
Marciolegal

Reputation: 31

Placing the legend outside of the plot works for me:

var layout = {
  showlegend: true,
  legend: {
    x: 1,
  }
};

Upvotes: 1

kroky
kroky

Reputation: 1316

Fixed by a css wizard https://tiki.org/item6567 (Luci):

.js-plotly-plot .plotly .main-svg {overflow: visible}
.js-plotly-plot .plotly .main-svg .legend {transform: translate(640px, 100px)}

Upvotes: 0

Related Questions