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.

animate?YLabelAnimate

Badge motion. true (default) glides the badge to new values, counts the value up during the initial reveal, and fades in with the intro. false snaps with no easing. Pass an object to tune YLabelAnimateOptions.

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>