Headline numbers

Headline numbers show a summary metric — a total, an average, or the latest value — alongside the chart, optionally with a trend indicator. They’re set through the headline section.

config({
  headline: { show: 'total', compareWith: 'previous' },
});

Options

show

'total' | 'average' | 'current' | 'none'

default:"none"

Which aggregate to display:

'total' — the sum of the series’ values.
'average' — the arithmetic mean.
'current' — the last value (useful for time series).
'none' — no headline.

compareWith

'previous' | 'first' | 'none'

default:"none"

Reference point for the trend indicator:

'previous' — compare to the preceding data point.
'first' — compare to the first value in the series.
'none' — no comparison shown.

size

'auto' | 'small' | 'medium' | 'large'

default:"auto"

Visual size. 'auto' scales with the available space and number of series.

position

'above' | 'center'

default:"above"

Where the headline sits. 'above' places it in the header region; 'center' places it in the hole of a donut chart — only valid when the polar coord has an inner radius.

In a donut’s centre

Pair position: 'center' with a donut to put the total in the ring’s hole:

pipe(
  createSpec({ x: '', y: 'revenue', color: 'region' }),
  geom.bar({ position: 'stack' }),
  coord.polar({ theta: 'y', innerRadius: 0.6 }),
  scale.x(),
  scale.y(),
  scale.color.palette(),
  config({ headline: { show: 'total', position: 'center' } })
);

Pie & donut — the donut’s hole is the natural home for a centred headline
Number format — how the headline value is formatted

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Options

In a donut’s centre

​Options

​In a donut’s centre

​Related

Options

In a donut’s centre

Related