Sizing and responsiveness

A chart’s size is controlled by four options: width, height, aspectRatio, and responsive.

Responsive charts

By default, responsive is true and the chart tracks the width of its container element. The width option has no effect in this mode.

const options = {
  responsive: true, // default; can be omitted
  aspectRatio: 2, // optional, see below
};

Size the container element (el) with CSS. The chart measures it, it does not set it. Give the container a width (for example width: 100% on a block element), and the chart follows it.

• If aspectRatio is set, the chart’s height is containerWidth / aspectRatio.
• Otherwise, the chart’s height comes from height, or defaults to 400.

Fixed-size charts

Set responsive: false to size the chart with explicit numbers instead of the container.

const options = {
  responsive: false,
  width: 600,
  height: 400,
};

The chart’s internal coordinate system (its SVG viewBox) is set to these numbers, but the <svg> element has no width or height attribute of its own. If a fixed-size chart looks stretched, squished, or clipped, check that its container element has a matching CSS size; the coordinate system and the rendered box size are two different things.

Margins are automatic

Chart margins are not configurable. After every render, the library measures whether axis labels, tick labels, or the legend overflow the chart’s bounds and adjusts the margins to fit. This can take one extra render pass after content that affects label size changes, such as a new tickFormat or longer category names.