> ## 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 input={spec} data={data}>
    <GraphRenderer sizing={{ mode: 'responsive' }} />
  </GraphProvider>
</div>
```

## 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.

## 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 }} />
```

## Reacting to resize

`onResize` fires with the new size in every mode:

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

## Related

* [Provider & renderer](/sdk-next/rendering/provider-and-renderer) — the other renderer props
* [Layout](/sdk-next/config/layout) — padding and region gaps within the chart