> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx theme={null}
config({
  headline: { show: 'total', compareWith: 'previous' },
});
```

## Options

<ParamField path="show" type="'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.
</ParamField>

<ParamField path="compareWith" type="'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.
</ParamField>

<ParamField path="size" type="'auto' | 'small' | 'medium' | 'large'" default="auto">
  Visual size. `'auto'` scales with the available space and number of series.
</ParamField>

<ParamField path="position" type="'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](/sdk-next/graph-types/pie) — only
  valid when the polar coord has an inner radius.
</ParamField>

## In a donut's centre

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

```tsx theme={null}
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' } })
);
```

## Related

* [Pie & donut](/sdk-next/graph-types/pie) — the donut's hole is the natural home for a centred headline
* [Number format](/sdk-next/config/number-format) — how the headline value is formatted