Multiple legends in horizontal mode overlap chart on resize from a narrow viewport to a wide one

[GeorgeFlorian]

I am having troubles when changing from portrait mode to landscape mode as the legends overlap the x axis ticks or the chart itself.

Here is the reproducible example: https://codepen.io/bleah1/full/ZEMGVpY

Please use Inspect tools and either make the viewport narrow and then pull pretty fast to make it wide again or just go to mobile view and switch from portrait to landscape.

The legends remain in the same place when resizing from a narrow viewport to a wider one.

This behavior is not as bad on PC, because you can resize again and everything falls into place, but on mobile you can't resize the viewport/window, you can only refresh and I can't use it as it is now.

The code is pretty basic:

const plotDiv = document.getElementById('plot');
const traces = [
    {x: [1,2,3], y: [2,1,4], stackgroup: 'one'},
    {x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
    {x: [1,2,3], y: [3,0,2], stackgroup: 'one'},
    {x: [1,2,3], y: [4,3,2], stackgroup: 'one'},
    {x: [1,2,3], y: [5,5,2], stackgroup: 'one'},
];

const layout = {
      showlegend: true,
      legend: {
        x: 0,
        // y: 1,
        orientation: "h",
        traceorder: "normal",
        yanchor: "top",
      },
      autosize: true,
      margin: { pad: 10, b: 10, l: 40, r: 40, t: 80 },  
}

const config = {
  responsive: true 
}

Plotly.newPlot('myDiv', traces, layout, config);

[GeorgeFlorian]

Is this repo not maintained anymore ? This is not my only issue with PlotlyJS and yet I've received no answers on my posted issues.

[alexcjohnson]

Thanks @GeorgeFlorian - I can confirm, if I do a single resize from a small width (where the legend has two rows) to somewhat wider (where it has one row) we wind up with too small a bottom margin. It's a little finicky to get this to happen on desktop because usually you get more than one resize, then it fixes itself on the second resize with a single row.

Apologies if we've missed your other issues, we do try to comment on issues that come in but sometimes they slip through the cracks.

[GeorgeFlorian]

Thanks @GeorgeFlorian - I can confirm, if I do a single resize from a small width (where the legend has two rows) to somewhat wider (where it has one row) we wind up with too small a bottom margin. It's a little finicky to get this to happen on desktop because usually you get more than one resize, then it fixes itself on the second resize with a single row.

Apologies if we've missed your other issues, we do try to comment on issues that come in but sometimes they slip through the cracks.

Thank you for your reply. I am sorry for being impatient. I've been tackling with Plotly for the past few months. Can you also take a look at this issue: https://github.com/plotly/plotly.js/issues/6493 ,please.