Navigator

import { Navigator } from '@wick-charts/react';
 
<Navigator data={navData} />

Miniature navigator strip with a draggable window indicator for the main chart's visible range. Must be rendered as a child of <ChartContainer> so the chart instance is available via context.

ChartContainer sifts this element out of its children and places it as a flex sibling below the canvas area — it does not render inline.

Mini overview strip showing the full series with a draggable zoom window. Pan, resize, and double-click to reset the visible range.

Props

dataNavigatorData

Data to render in the miniature view. Shape: { type: 'line' | 'bar', points: { time, value }[] } { type: 'candlestick', points: { time, open, high, low, close }[] }

Usually the same series you feed into the main chart.

height?default to `theme.navigator.height`number

Strip height in CSS pixels. Defaults to theme.navigator.height (60).

style?CSSProperties

Style override for the outer wrapper div.

className?string

Extra class on the outer wrapper div.