Chart Size

Every chart in vccs needs a width and height. You can set them explicitly, let the chart size itself with the responsive prop, or wrap it in <ResponsiveContainer>.

Explicit dimensions

Pass width and height directly to the chart component:

<BarChart :width="600" :height="400" :data="data">
  <Bar data-key="value" fill="#f97316" />
</BarChart>

Responsive sizing with the responsive prop

The simplest way to make a chart follow its parent is the responsive prop (recommended). No extra wrapper component is needed — the chart's own root element fills the parent via standard CSS sizing and measures itself with a ResizeObserver:

<!-- Full width, fixed height -->
<LineChart responsive :style="{ height: '300px' }" :data="data">
  <Line data-key="value" fill="#f97316" />
</LineChart>

<!-- Fill a sized parent (flex/grid cell, etc.) -->
<div style="width: 100%; height: 300px">
  <LineChart responsive :data="data">
    <Line data-key="value" />
  </LineChart>
</div>

<!-- Keep an aspect ratio via CSS -->
<LineChart responsive :style="{ width: '100%', aspectRatio: '16 / 9' }" :data="data">
  <Line data-key="value" />
</LineChart>

When responsive is set, any width/height props are ignored — sizing is driven entirely by CSS. Give the parent (or the chart's style) a definite height, otherwise the chart collapses to zero height and nothing renders.

Responsive sizing with ResponsiveContainer

Alternatively, wrap your chart in <ResponsiveContainer> to fill its parent container. All the chart demos on this site use ResponsiveContainer — here's an example:

ResponsiveContainer uses a ResizeObserver internally to track its parent's dimensions and passes them to the chart.

Common patterns:

<!-- Fixed height, full width -->
<ResponsiveContainer width="100%" :height="300">
  ...
</ResponsiveContainer>

<!-- Percentage of parent -->
<ResponsiveContainer width="100%" height="100%">
  ...
</ResponsiveContainer>

<!-- With aspect ratio -->
<ResponsiveContainer width="100%" :aspect="16 / 9">
  ...
</ResponsiveContainer>

Chart margins

The margin prop adds internal padding between the chart edges and the drawing area. This chart uses margin: { top: 20 } to make room for labels above bars:

Default margin is { top: 5, right: 5, bottom: 5, left: 5 }.

Increase margins when you need space for:

• Axis labels that extend beyond the chart area
• <LabelList> with position="top" on bars
• Legend positioned outside the chart

Common sizing issues

Chart not visible: Ensure the parent element has a defined width and height. Both the responsive prop and ResponsiveContainer require the parent to have a non-zero size (a definite height in particular).

Chart too small: Check that margin values aren't consuming most of the available space. Large margins on a small chart can leave very little room for data.

SSR rendering: Both the responsive prop and ResponsiveContainer rely on ResizeObserver, so the chart only sizes itself on the client. In Nuxt/SSR environments, wrap the chart in <ClientOnly>:

<ClientOnly>
  <ResponsiveContainer width="100%" :height="300">
    <LineChart :data="data">
      <Line data-key="value" />
    </LineChart>
  </ResponsiveContainer>
</ClientOnly>