Interval markers

Vertical band markers for highlighted index ranges (e.g. workout work/rest intervals). Indices are relative to the visible data array.

Primitive: ChartIntervalMarkers

Interactive demo

Usage

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

<ChartRoot data={data} height={200}>
  <ChartIntervalMarkers
    intervals={[{ name: 'I1', startIndex: 30, endIndex: 90, type: 'work' }]}
    showLabels
  />
</ChartRoot>

Props

PropTypeDefaultDescription
intervals*Interval[]Interval definitions (name, startIndex, endIndex, type)
workColorstring'#E36B30'Color for work intervals
restColorstring'#14B8A2'Color for rest intervals
showLabelsbooleanfalseRender interval names above the bands