plotly.js legend overlap the graph

Question

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?

Answer 1

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

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

Answer 2

Placing the legend outside of the plot works for me:

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