Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"

[GeorgeFlorian]

I have designed an use case where there is no data to display on the chart: please imagine an user selecting from a list of countries to display some data and the selected country has no data to be displayed. I have all the data available, the page doesn't need to be refreshed (we're trying to keep it dynamic) so the Plot needs to be updated.

Please check this pen: https://codepen.io/bleah1/pen/NWOoZXd where, after 4 seconds, both plots are updated.

As such, I update the Plot using Plotly.react() with no data and a special layout:

const noDataChartLayout = {
  width: 400,
  autosize: true,
  title: null,
  margin: { t: 0, b: 0, pad: 0 },
  // showlegend: false,
  legend: {
    yref: "paper",
    xref: "paper",
    y: 0,
    x: 0
  },
  hovermode: false,
  dragmode: false,
  xaxis: {
    visible: false
  },
  yaxis: {
    visible: false
  },
  annotations: [
    {
      text: "Chart unavailable.<br>No matching data found.",
      xref: "paper",
      yref: "paper",
      showarrow: false,
      font: {
        size: 20
      }
    }
  ]
};

The issue is that when the legend is set with the new layout.legend.xref / yref features to container the margins of the plot do not reset even after updating the layout.

I've tried using or commenting the following layout props:

  // showlegend: false,
  legend: {
    yref: "paper",
    xref: "paper",
    y: 0,
    x: 0
  },

but the annotations still aren't centered when using layout.legend.xref / yref set to container.

With container:

With paper:

I would like to use the new layout.legend.xref / yref features because with them I don't need to manually calculate legend.x and y positioning and layout.margin for each view size for each chart.

Any thoughts ?

[GeorgeFlorian]

@hannahker Sorry for tagging you, but I can't find any solutions to this and I would like to use the new features.

[hannahker]

Hey @GeorgeFlorian - in my testing it looks like the container referencing is being properly reset to paper -- the spacing that you're seeing at the top of the first plot (causing the annotation not to be centered) is actually due to the automargin spacing added for the title. In your noChartDataLayout you could change title: null to title: {'automargin': false} to get the intended margin reset. Does this accomplish what you're looking for?

[GeorgeFlorian]

Hey @GeorgeFlorian - in my testing it looks like the container referencing is being properly reset to paper -- the spacing that you're seeing at the top of the first plot (causing the annotation not to be centered) is actually due to the automargin spacing added for the title. In your noChartDataLayout you could change title: null to title: {'automargin': false} to get the intended margin reset. Does this accomplish what you're looking for?

title: {'automargin': false} does not fix my issue. The annotations are still not centered. You can check it on the same codepen: https://codepen.io/bleah1/pen/NWOoZXd