Range Navigator

A price history chart with a range selector minimap; drag the window to pan and pull an edge to zoom, for trading and analytics apps.

Range Navigator

A price history chart with a range selector minimap; drag the window to pan and pull an edge to zoom, for trading and analytics apps.

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.

Props · 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.