Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug]: AreaChart renders SVG rect with negative width and height on initial render

Aperta Adatta ai principianti
  • Qualcosa non va?
#36,976 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@huong8373tt-beep ci sta già lavorando.

Dal 22/10/2026.

  • #36977 di @huong8373tt-beep — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia con il rettangolo di hover di AreaChart nel pacchetto @fluentui/react-charting e usa la riproduzione StackBlitz per osservarne le dimensioni al primo rendering. Controlla i test esistenti del componente per il rendering del grafico e aggiungi test per le dimensioni iniziali non valide. Il lavoro è completato quando il rect trasparente non produce più larghezza o altezza negative prima della misurazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Needs: Triage :mag: Package: charting Type: Bug :bug:
Charting Control

AreaChart

Package version

@fluentui/react-charting 5.25.6

React version

React 19.2.4

Environment
System:
  OS: Windows 11 Enterprise 10.0.26300
  CPU: Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
  Node: v24.11.0
Browsers:
  Edge: 155.0.4283.45
npmPackages:
  @fluentui/react-charting: 5.25.6
  react: 19.2.4
  react-dom: 19.2.4
  @types/react: 18.3.28
  @types/react-dom: 18.3.7
Current Behavior

The browser logs errors about negative SVG rectangle dimensions. The chart displays correctly after measurement, so the visible output is unaffected.

Image
Expected Behavior

Clamp both values to zero, or skip rendering the hover rectangle until the chart has valid dimensions.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gjyhrnvu

Steps to reproduce

Render an AreaChart inside a container with a fixed width and margins.
Open the browser console on first render.
Observe errors about negative width and height on the transparent .

Image
Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

Content Studio

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Lingua principale
TypeScript
Stelle
20.3k
Fork
2.9k
Merge medio
2g 9h
PR unite (30g)
70

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/fluentui

Tutte le issue di microsoft/fluentui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.