Responsive
Size charts from the parent, the viewport, or a fixed ScaleSVG viewBox — plus a mobile scrub shell.
Fixed-pixel Storybook widths teach the marks. In an app the plot usually fills a card or panel. @viraui/charts re-exports visx sizing helpers so the SVG tracks the host.
Each preview below uses the same horizontally resizable sandbox as fluid typography — drag the iframe edge to watch ParentSize / useParentSize / ScaleSVG reflow.
Common examples
useParentSize
Measure a ref and pass width / height into marks.
ParentSize
Same measurement with a render prop instead of a ref hook.
useScreenSize
Size from the viewport when the card is not the constraint.
ScaleSVG
When the composition is authored at a fixed viewBox and should scale into the host, wrap marks in ScaleSVG — do not nest another <svg> inside.
Fluid bar
Rebuild band and linear scales from the measured box.
Fluid area
Same host pattern with AreaClosed and point scales.
Fluid pie
Center Pie using min(width, height) for radius.
Fluid radar
Polar scales from the smaller of width and height.
Mobile scrub
For dense day series on a narrow viewport, sticky Y + horizontal scroll + a header that reads the scrubbed point beats a floating tooltip. The Line family owns the marks; this page owns the responsive shell.
Cross-link from Line when the product story is the scrub pattern itself.
Ask your agent
Make this visitors chart fill the card width and keep a readable height on mobile.Last updated on