plotly / plotly/plotly.js

Resizing pie chart with tooltips misaligns it and throws error

Offen
#6,696 0 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

When using a certain combination of settings, pie charts can become misaligned, throwing the error trace.insidetextfont is undefined:
image

To reproduce the bug, first hover over the pie chart to bring up a tooltip, then resize the sandbox window to make the pie chart resize itself. The bug will not appear if you resize the chart without bringing up a tooltip at some point first.

I've created a minimum reproduction here:

<Plot
  data={[
    {
      values: [1, 2],
      type: "pie",
      textinfo: "none",
      hovertext: ["Tooltip 1", "Tooltip 2"]
    }
  ]}
  style={{
    width: "100%"
  }}
  useResizeHandler
/>

Note that you don't need multiple pie sections to get the error (that's for demonstrating the misalignment), but you do appear to need everything else in some form, including, interestingly, textinfo: "none".

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

Beginne mit der verlinkten CodeSandbox-Reproduktion und reproduziere die Abfolge: Fahre mit der Maus über das Kreisdiagramm und ändere dann die Größe des Sandbox-Fensters. Verfolge die Interaktion zwischen Größenänderung und Tooltip, bis der Fehler trace.insidetextfont is undefined und die Fehlpositionierung erklärt sind; als erledigt gilt die Aufgabe, wenn das Diagramm ohne den Fehler oder eine visuelle Verschiebung seine Größe ändert, auch mit textinfo: "none" und hovertext.

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
35/100

Neue Issues direkt in Ihr Postfach

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