Beta
Range Navigator
Focus + context price history — a detail chart over a compressed mini-map of the whole series; drag the window to pan, pull an edge to zoom, and hover the plot for a dashed crosshair whose card reads that point's price and date. Axis ticks and end labels are derived from the current window.
Range Navigator
Focus + context price history — a detail chart over a compressed mini-map of the whole series; drag the window to pan, pull an edge to zoom, and hover the plot for a dashed crosshair whose card reads that point's price and date. Axis ticks and end labels are derived from the current window.
When to use it
The one to use when a series is too long to show at full detail but the reader still needs to reach any part of it. The mini-map keeps the whole range visible while the detail chart shows only the window, which a zoomable single chart cannot do.
Install
Adds Range Navigator and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/range-navigator.jsonProps · RangeNavigator
| Prop | Type | Default |
|---|---|---|
| title? | stringQuiet caption above the detail chart. | "Price history · drag to navigate" |
| values? | number[] | — |
| endDate? | DateDate of the last sample — every earlier point steps back one day. | DEFAULT_END_DATE |
| initialWindow? | numberHow many trailing points the window opens on. | 72 |
| minWindow? | number | 12 |
| color? | stringThe one series hue. | BLUE |
| locale? | stringNumber formatting for the price axis and the hover card. | "en-US" |
| currency? | string | "USD" |
| onWindowChange? | (range: { start: number; end: number }) => void className?: stringFires with the point range whenever the window is panned or zoomed. | — |
Generated from the component source. Run npm run props:extract after changing a signature.