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

[Bug] Printed charts keep their screen width: resize redraw waits for an animation frame

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

Los mantenedores suelen responder en 1 día

@piecyk ya está trabajando en esto.

Desde el 14/10/2026.

  • #229 de @piecyk — abierto

Evaluación

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

Línea de trabajo

Start in packages/charts-core/src/renderer.ts around lines 406-432, where scheduleRender() defers redraws to requestAnimationFrame, and trace how the ResizeObserver callback reaches it. The root svg uses a viewBox built from the screen width, so the redraw must run when the container width changes, including under print media. Pull request #229 is already open against this issue, so check it before starting.

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

Descripción

Version: @tanstack/charts 1.1.0, Chromium. Also seen with Playwright page.pdf().

A responsive chart (no width) is drawn at its screen width. When the page is printed or exported with page.pdf(), the print layout narrows the container but the chart is not redrawn. The browser scales the screen drawing down, so text and strokes shrink, and a fixed-height chart is letterboxed with empty space above and below.

Why
  • The root SVG uses width="100%" height="100%" with viewBox="0 0 <screenWidth> <height>", so a width change scales the existing drawing.
  • ResizeObserver sees the new size, but the redraw goes through scheduleRender(), which waits for requestAnimationFrame (renderer.ts).
  • Print and page.pdf() lay out and paint without running an animation frame, so the redraw never happens before the page is printed.
Repro
  1. Render <Chart definition={…} height={320} ariaLabel="…" /> in a container with a percentage width.
  2. Open print preview in a viewport wider than the page, or call page.pdf({ format: 'A4' }) on a 1200px-wide page.
  3. The chart is a scaled-down screen drawing, not a chart laid out for the page width.
Expected

The chart redraws at the print container width before printing.

Workaround

On the print media change, measure the container and pass it as a fixed width inside flushSync, then remove width when print ends. It works, but every app that prints has to know about it.

Lenguaje dominante
TypeScript
Estrellas
842
Forks
53
Merge medio
4 h 40 min
PR fusionados (30 d)
16

Preparar el entorno

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 TanStack/charts

Todos los issues de TanStack/charts

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.