Chart Size

Every chart in vccs requires a width and height. You can set these explicitly or use <ResponsiveContainer> for dynamic sizing.

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

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. ResponsiveContainer with width="100%" requires its parent to have a non-zero width.

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: ResponsiveContainer relies on ResizeObserver and renders nothing on the server. Wrap it in <ClientOnly> in Nuxt/SSR environments:

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