Channel label

Top-left channel name (e.g. "HR", "Power") with a semi-transparent backdrop so a graph line cannot mask the text.

Primitive: ChannelLabel

Interactive demo

Usage

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

<ChartRoot data={data} height={200}>
  <ChannelLabel text="Power">Power</ChannelLabel>
</ChartRoot>

Props

PropTypeDefaultDescription
children*ReactNodeRendered label content
text*stringPlain text used to size the backdrop
xnumber4X position in px
ynumber12Y position in px