Layout

The layout section controls the whitespace around the chart — the outer padding, and the gaps between the regions the engine arranges (header, legend, axes, plot).

config({
  layout: { padding: 32 },
});

Padding

number | null

default:"24"

Outer padding in pixels, applied on all four sides. null uses the engine default.

Region gaps

The chart is laid out as a grid of named regions. gaps overrides the spacing around any of them; anything left unset keeps the default.

config({
  layout: {
    padding: 24,
    gaps: {
      header: 40, // space below the header
      bottomLegend: 16,
    },
  },
});

A gap value is either a number (sets the trailing/after gap) or { before, after } to set each edge independently. The overridable regions are:

Direction	Regions
Rows	`header`, `headline`, `topLegend`, `topAxisLabel`, `topAxis`, `bottomAxis`, `bottomAxisLabel`, `bottomLegend`
Columns	`leftLegend`, `leftAxis`, `rightAxis`

Adjacent regions share a boundary using a max(previous.after, next.before) rule, so a lone after can’t shrink a boundary below the following region’s before.

Appearance — background, border and corner radius
Legend — legend position feeds the region layout

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Padding

Region gaps

​Padding

​Region gaps

​Related

Padding

Region gaps

Related