[Bug] Printed charts keep their screen width: resize redraw waits for an animation frame
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 25/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- d3, react, typescript
- Domain
- data-visualization, frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
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%"withviewBox="0 0 <screenWidth> <height>", so a width change scales the existing drawing. ResizeObserversees the new size, but the redraw goes throughscheduleRender(), which waits forrequestAnimationFrame(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
- Render
<Chart definition={…} height={320} ariaLabel="…" />in a container with a percentage width. - Open print preview in a viewport wider than the page, or call
page.pdf({ format: 'A4' })on a 1200px-wide page. - 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.
- Dominant language
- TypeScript
- Stars
- 819
- Forks
- 49
- Avg merge
- 4h 40m
- Merged PRs (30d)
- 16
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from TanStack/charts
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`Possibly taken @getdownandcode claimed this 1 day ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
TanStack/charts#211 · 1 comment ·
Maintainers usually reply within 1 day
-
[Feature] Readable outside labels for crowded pie and donut chartsPossibly taken A pull request linked to this issue is open or already merged. Open
Difficulty 5/5 Over a week Newbie friendliness 25/100
TanStack/charts#227 · 2 comments ·
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 42/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 57/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
Maintainers usually reply within 1 day
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
stellar/stellar-dev-skill#151 ·
Maintainers usually reply within 1 day
-
area:arcade game ready-for-agent
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
fderuiter/deruiter.dev#2281 · 1 comment ·
Maintainers usually reply within 1 day
-
scope: data grid type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 2 days
-
fix(frontend): correct VITE_IS_DEVELPOMENT typo in shared/app.ts and align dev environment flagsOpen
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
vicharanashala/ajrasakha#1439 ·
Maintainers usually reply within 1 day
-
Add: TV5Monde AsieOpenapproved check:passed streams:add
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day