Geoms & layers

A geom is what a chart draws for its data — a line, a bar, a point. Each geom is a layer in the spec; add several and they stack into one chart. Geoms are the visible half of the grammar: mappings and scales decide where things go, geoms decide what is drawn there.

The built-in geoms

Geom	Draws	Reads
`geom.point()`	A point per observation	`x`, `y`, `color`, `size`, `alpha`
`geom.line()`	A path connecting observations	`x`, `y`, `color`, `strokeWidth`, `lineType`
`geom.area()`	A filled band under a line	`x`, `y`, `color`
`geom.bar()`	A rectangle (or arc, in polar) per observation	`x`, `y`, `color`
`geom.rule()`	A single reference line across the panel	`x` or `y`

Each is a factory that returns a layer. Call it with options to configure the layer, and geom-specific params to style what it draws:

geom.line({ params: { interpolate: 'catmull-rom', showFill: true } });
geom.bar({ position: 'stack', params: { width: 0.8, borderRadius: 4 } });
geom.point({ params: { size: 6 } });

The params available depend on the geom — see each chart type page, or the reference for the full list.

Layers

Every geom.*() you pipe in adds a layer, drawn in order — later layers sit on top. Layers share the spec-level mapping unless one overrides it. This is how decorated and combo charts are built:

pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line(), // the trend
  geom.point(), // a dot on every vertex, on top
  scale.x(),
  scale.y()
);

Common layer options

Beyond params, every geom accepts these options:

Option	Purpose
`aes`	A layer-local mapping, merged over the spec’s
`position`	How overlapping observations arrange — see below
`stat`	A statistical transform for this layer (count, mean, smooth)
`yScaleType`	Bind the layer to the `'primary'` or `'secondary'` y-axis
`dataLabels`	Show value labels on each observation
`transforms`	Transforms applied to this layer’s view of the data
`interactive`	Set `false` to exclude the layer from hover hit-testing

Position modes

When several observations share the same x (because color or group splits the data), a layer’s position decides how they arrange:

Position	Effect
`'identity'` (default)	Draw at the raw value; observations may overlap
`'stack'`	Stack observations end to end
`'fill'`	Stack, then normalise each stack to 100%
`'dodge'`	Place observations side by side within the band

geom.bar({ position: 'stack' }); // stacked columns
geom.bar({ position: 'dodge' }); // grouped columns
geom.area({ position: 'stack' }); // stacked area

Scales — map values to positions, colors and sizes
Statistics — summarise a layer before drawing it
Chart types — geoms assembled into recipes

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

The built-in geoms

Layers

Common layer options

Position modes

Next

​The built-in geoms

​Layers

​Common layer options

​Position modes

​Next

The built-in geoms

Layers

Common layer options

Position modes

Next