Chart Size

Charts are responsive by default. Each numeric width or height prop fixes that dimension; a dimension without a number follows the box the chart sits in. This applies to every chart, including Sankey, Treemap and SunburstChart.

Full width, fixed height

The most common chart: as wide as its container, 300 px high.

<BarChart :data="data" :height="300">
  <Bar data-key="value" />
</BarChart>

Fixed size

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

Fill the parent

Without a size, the chart fills its parent. Give the parent a definite height:

<div class="h-80 w-full">
  <LineChart :data="data">
    <Line data-key="value" />
  </LineChart>
</div>

Keep an aspect ratio

<LineChart :data="data" :aspect="16 / 9">
  <Line data-key="value" />
</LineChart>

The height follows the width. In shadcn-vue, the ChartContainer's aspect-video class does the same.

Server rendering

The server cannot measure the page. A responsive chart reserves its box in the layout and stays hidden until the browser measures it, then appears at its real size and plays its entrance there. Until then it uses an initial size: 640 px wide and 360 px high (or 640 / aspect); a fixed width or height is used as given. initial-dimension sets this size, which is the geometry of the first frame:

<AreaChart :data="data" :height="250" :initial-dimension="{ width: 900, height: 250 }">
  <Area data-key="value" />
</AreaChart>

A chart with a fixed width and height needs no measurement and is visible at once.

See Nuxt and SSR for the details.

Chart margins

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

The default margin is { top: 5, right: 5, bottom: 5, left: 5 }. Increase it for axis labels outside the plot, <LabelList position="top"> on bars, or a legend outside the chart.

ResponsiveContainer (deprecated)

Common sizing issues

Chart is not visible: the parent has no height. Give the chart a height, give the parent a height, or use aspect.

Chart is too small: large margins or a wide Y axis use up the space. Check margin and the axis width.