sizing prop on GraphRenderer decides how the chart claims space in its container. It defaults to responsive.
Responsive
The chart fills its parent container and re-lays out when the container resizes. Give the parent a size:The chart paints once the first measurement lands, and a measurement only
counts when both dimensions are above zero. Give the parent a real height — in
a container with no height the renderer measures 0 and paints nothing.
Fixed
Explicit pixel dimensions, ignoring the container:style.graph({ borderWidth }) ring lays out in slightly less than the size you asked for — twice the border width in each axis.
Keep aspect ratio
The chart scales to the container’s width while holding a ratio — good for cards in a responsive grid. Provide an intrinsic size, or one dimension plus anaspectRatio:
transform scales the result to the measured container width, so type is scaled rather than re-laid-out: a card at half width shows the same layout at half the type size, not a chart re-solved for a narrower box. Before the first measurement the outer element reserves space with the CSS aspect-ratio property.
Every dimension must resolve to a positive, finite number — a zero, negative or NaN width or height throws rather than rendering an empty box.
Reacting to resize
onResize fires with the graph container size in every mode — not the panel (the data rectangle inside the axes):
panelRect from its render input instead. That rect is already inset from axes and chrome, and it updates on every layout.
Related
- Provider & renderer — the other renderer props
- Layout — padding and region gaps within the chart