Sizing

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

<GraphRenderer sizing={{ mode: 'responsive' }} />

Responsive

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

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

Fixed

Explicit pixel dimensions, ignoring the container:

<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:

<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:

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

Provider & renderer — the other renderer props
Layout — padding and region gaps within the chart

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Responsive

Fixed

Keep aspect ratio

Reacting to resize

​Responsive

​Fixed

​Keep aspect ratio

​Reacting to resize

​Related

Responsive

Fixed

Keep aspect ratio

Reacting to resize

Related