> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Sizing

The `sizing` prop on `GraphRenderer` decides how the chart claims space in its container. It defaults to `responsive`.

```tsx theme={null}
<GraphRenderer sizing={{ mode: 'responsive' }} />
```

## Responsive

The chart fills its parent container and re-lays out when the container resizes. Give the parent a size:

```tsx theme={null}
<div style={{ width: '100%', height: 400 }}>
  <GraphProvider spec={spec} data={data}>
    <GraphRenderer sizing={{ mode: 'responsive' }} />
  </GraphProvider>
</div>
```

<Note>
  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.
</Note>

## Fixed

Explicit pixel dimensions, ignoring the container:

```tsx theme={null}
<GraphRenderer sizing={{ mode: 'fixed', width: 640, height: 360 }} />
```

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({ borderWidth })` [ring](/sdk-next/config/styling) 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 an `aspectRatio`:

```tsx theme={null}
<GraphRenderer sizing={{ mode: 'keepAspectRatio', intrinsicWidth: 800, intrinsicHeight: 480 }} />
<GraphRenderer sizing={{ mode: 'keepAspectRatio', intrinsicWidth: 800, aspectRatio: 16 / 9 }} />
<GraphRenderer sizing={{ mode: 'keepAspectRatio', intrinsicHeight: 480, aspectRatio: 16 / 9 }} />
```

The chart lays out at its intrinsic size and a CSS `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):

```tsx theme={null}
<GraphRenderer
  sizing={{ mode: 'responsive' }}
  onResize={({ width, height }) => console.log(width, height)}
/>
```

A [geom renderer](/sdk-next/extending/geom-renderers) 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

* [Provider & renderer](/sdk-next/rendering/provider-and-renderer) — the other renderer props
* [Layout](/sdk-next/config/layout) — chrome `margin` and outer `style.graph({ padding })`


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.