Legend overlaps xaxis labels

[matinh]

Hi experts !

I have a very simple linechart with a date-axis and a legend positioned at the bottom of this chart. When the legend grows (multiple traces, thus multiple lines in legend), it starts overlapping the tick-labels from the date-axis.

Here is a demonstration of the problem on CodePen.

And here is a screenshot of what the plot looks like:

I know there is layout.margin.autoexpand, which seems to have no effect here.

I also know, I can manually increase the margins via layout.margin.[b|t], which would help. But as I don’t know the texts for the traces and thus the size of the legend in advance, I’m not able to calculate a suitable value for the margins.

Is the overlapping a bug of the auto-positioning algorithm (as mentioned here). Or do I need some other setting to get a non-overlapping legend?

Thanks in advance,
Martin

[matinh]

I finally managed to “solve” my problem by adjusting the positioning of the legend.

Here is what I changed (compared to the CodePen from above):

  legend: {
    itemwidth: 100,
    yref: 'paper',     // changed from 'container' to 'paper'
    y: -0.15,          // changed from 0.001 to -0.15
    orientation: 'h',
    font: { size: 15 },
  }

With this settings, the plot looks quite good:

No more overlapping, regardless of the actual number of traces shown.

The only concern I have is a quite big padding if the x-axis labels only spawn a single line, which actually depends on the zoom-level.

Any idea how I could solve this remaining issue?

Regards,
martin

[matinh]

It finally turned out, that enabling automargin on the xaxis solved the problem:

  xaxis: {
    automargin: 'height'
  },

[Mikhail]

Guten Morgen the issue persists when re-adjusting the window to a wider window.

1. What it originally looks like, showing x-axis:
   

   

2. What it looks like after shirking, and again expanding the window: