plotly / plotly/plotly.js

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

Ouverte
#6,612 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug P3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

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 ?

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Reproduisez le comportement dans le CodePen lié, en vous concentrant sur la mise à jour de Plotly.react() qui modifie xref/yref de la légende en "container", puis restaure la mise en page sans données. Suivez l’impact de la légende du conteneur sur les marges du graphique et le positionnement de l’annotation ; le travail est terminé lorsque les marges sont réinitialisées et que l’annotation est centrée après la mise à jour, conformément au comportement de la référence papier.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
data-visualization
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.