Zone line

Line that changes color by zone. Each zone defines a min/max range and color. Used for power/HR zone visualization.

Primitive: ChartZoneLine

Interactive demo

Usage

import { ChartRoot, ChartZoneLine } from '@ramtt/charts'

const zones = [
  { min: 0, max: 150, color: '#16A34A', label: 'Z2' },
  { min: 150, max: 250, color: '#F59E0B', label: 'Z3' },
  { min: 250, max: Infinity, color: '#EF4444', label: 'Z5' },
]

<ChartRoot data={powerData} height={200}>
  <ChartZoneLine zones={zones} threshold={200} />
</ChartRoot>

Props

Prop	Type	Default	Description
zones*	`ZoneDefinition[]`	—	Zone color ranges
threshold*	`number`	—	FTP/threshold value
data	`readonly number[]`	—	Override data