plotly / plotly/plotly.js

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

Offen
#6,612 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

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:

image

With paper:

image

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 ?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere das Verhalten im verlinkten CodePen und konzentriere dich auf das Plotly.react()-Update, das die Legendenwerte xref/yref in "container" ändert und anschließend das Layout ohne Daten wiederherstellt. Verfolge, wie sich die Container-Legende auf die Plot-Ränder und die Positionierung der Annotation auswirkt; abgeschlossen ist die Aufgabe, wenn die Ränder zurückgesetzt und die Annotation nach dem Update zentriert ist und dem Verhalten der Paper-Referenz entspricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.