Skip to main content
The 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, paints nothing, and logs a ZERO_SIZE_CONTAINER warning to the console once.

​
Fixed

Explicit pixel dimensions, ignoring the container:
Useful for image export or thumbnails where the output size must be exact. The graph frame’s border is drawn inside the sizing box, so a chart with a style.graph({ strokeWidth }) border 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, which suits cards in a responsive grid. Provide an intrinsic size, or one dimension plus an aspectRatio:
The chart lays out at its intrinsic size and a CSS transform scales the result to the measured container width. Type scales with it rather than re-flowing: a card at half width shows the same layout at half the type size, not a chart laid out again 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):
A geom renderer that needs the panel’s pixel size reads panelRect from its render input instead. That rect is already inset from axes and chrome, and it updates on every layout.

​
Related