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

[Bug]: StackedBarChart has inconsistent padding between adjacent bars

Aperta
#36,913 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
64/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with the StackBlitz reproduction linked in the issue and inspect the StackedBarChart rendering path in Fluent UI. The report points to gaps between adjacent segments and suggests zero-valued data points may be involved; compare the reproduced output with the expected continuous bars. Done means the segments render without unexpected gaps while preserving the reproduction's data and behavior.

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

Descrizione

Package: charting Type: Bug :bug:
Charting Control

Other...

Package version

5.25.12

React version

17.0.2

Environment
System:
    OS: Windows 11 10.0.26300
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 2.56 GB / 31.65 GB
  Browsers:
    Chrome: 155.0.8059.84
    Edge: Chromium (154.0.4258.62)
    Firefox: 157.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2
Current Behavior
Image

When rendering a StackedBarChart, unexpected gaps appear between adjacent bar segments. The segments should render continuously without the visible spacing shown in the screenshot. It's possible this happens because of the data points with "0" value.

Expected Behavior
Image

On previous version 5.16.4 this was not an issue

Reproduction

https://stackblitz.com/edit/vitejs-vite-nhupkrig?file=src%2FApp.tsx

Steps to reproduce
  1. See weird gap in styling on render
Are you reporting an Accessibility issue?

None

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

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.4k
Fork
3k
Merge medio
2g 10h
PR unite (30g)
67

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.