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

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,976 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@huong8373tt-beep ya está trabajando en esto.

Desde el 22/10/2026.

  • #36977 de @huong8373tt-beep — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
data-visualization, frontend

Línea de trabajo

Empieza con el rectángulo de interacción al pasar el cursor de AreaChart en el paquete @fluentui/react-charting y utiliza la reproducción de StackBlitz para observar sus dimensiones en el primer renderizado. Revisa las pruebas existentes del componente para el renderizado del gráfico y añade cobertura para dimensiones iniciales no válidas. El trabajo estará hecho cuando el rect transparente deje de producir un ancho o una altura negativos antes de la medición.

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

Descripción

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

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.