Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug]: StackedBarChart has inconsistent padding between adjacent bars

Abierto
  • ¿Algo no está bien?
#36,913 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
64/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 6 h
PR fusionados (30 d)
72

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.