Navigator
Stock-style minimap below stacked charts with draggable viewport and resize handles. Reads/writes ChartSyncProvider zoom range.
Primitive:
ChartNavigatorInteractive demo
Usage
import { ChartSyncProvider, ChartRoot, ChartNavigator } from '@ramtt/charts'
<ChartSyncProvider dataLength={fullData.length}>
<ChartRoot data={visibleSlice} height={200}>{/* … */}</ChartRoot>
<ChartNavigator data={fullData} height={48} />
</ChartSyncProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | readonly number[] | — | Full dataset for the mini area chart |
| height | number | 48 | Navigator height in px |
| className | string | — | Additional Tailwind classes |