Wick Charts

YLabel

import { YLabel } from '@wick-charts/react';
 
<YLabel seriesId='btc'>
{({ value, isLive, format }) => (
<span>{format(value)}{isLive ? "•" : ""}</span>
)}
</YLabel>

Floating price badge anchored to the last data point of a series. Pulses with the data and animates value transitions via NumberFlow.

Floating price badge anchored to the last data point of a series. Pulses with the data and animates value transitions via NumberFlow.

Props

seriesId?string

Owning series id. Optional — when omitted, the first visible single-layer time series is picked, falling back to the first visible multi-layer time series. null (no compatible series) renders nothing.

color?string

Override badge color (e.g. line color). If not set, uses up/down/neutral from theme.

format?ValueFormatter

Custom formatter. Routed through NumberFlow as its format prop so the digit-by-digit animation still plays on the output string — NumberFlow animates whichever characters the formatter returns.

children?(ctx: YLabelRenderContext) => ReactNode

Render-prop escape hatch. Receives the resolved value, pixel position, and direction metadata. Replaces the built-in badge + dashed line entirely.

Render prop

// children: (ctx: YLabelRenderContext) => ReactNode
<YLabel>
{({ value, isLive, format }) => (
<span>{format(value)}{isLive ? "•" : ""}</span>
)}
</YLabel>