Zone background

Filled horizontal bands behind chart data based on training zones (e.g. Coggan power zones). Place before ChartLine in JSX.

Primitive: ChartZoneBackground

Interactive demo

Usage

import { ChartRoot, ChartZoneBackground, ChartLine, POWER_ZONES } from '@ramtt/charts'

<ChartRoot data={data} height={200}>
  <ChartZoneBackground threshold={240} zones={POWER_ZONES} showLabels />
  <ChartLine />
</ChartRoot>

Props

Prop	Type	Default	Description
threshold*	`number`	—	Threshold value (e.g. FTP in watts) — zones are computed as fractions of this
zones	`ZoneDefinition[]`	—	Zone definitions (default: Coggan POWER_ZONES)
opacity	`number`	0.06	Fill opacity for zone bands
showLabels	`boolean`	false	Show zone labels on the right edge
className	`string`	—	Additional Tailwind classes