InfoBar

import { InfoBar } from '@wick-charts/react';
 
<InfoBar>
  {({ snapshots, time, isHover }) => (
    <span>{snapshots.length} series</span>
  )}
</InfoBar>

Compact OHLC/series info bar rendered as a flex row above the chart canvas. Pairs with Tooltip (which then only renders its floating near-cursor part).

Pass a render-prop child for a custom layout — the built-in UI is used when children is omitted.

Persistent header strip showing the last-known values from each series, including direction arrows and percent change. Stays visible when no hover is active — the companion to <Tooltip>.

Props

sort?TooltipSort

Sort order for line values (default: 'none').

format?default adaptive precision for ohlc/valueTooltipFormatter

Custom formatter for every displayed number in the default UI. Called per cell with the field hint ('open' | 'high' | 'low' | 'close' | 'volume' | 'value'). Defaults: adaptive precision for ohlc/value, compact (K/M/B/T) for volume. Ignored when children is a render-prop.

children?(ctx: InfoBarRenderContext) => ReactNode

Render-prop escape hatch. Receives the computed snapshots and replaces the entire built-in layout. Filter, reorder, or re-style rows here without re-implementing any data wiring.

Render prop

// children: (ctx: InfoBarRenderContext) => ReactNode
<InfoBar>
  {({ snapshots, time, isHover }) => (
    <span>{snapshots.length} series</span>
  )}
</InfoBar>