Spark UI
Back to UI Kit

Lens Range

A zoomable area chart: drag or resize the lens on the overview strip and the main chart pans with it in real time.

Interactive Stage Preview

Customize

5 options
Accent Color
Samples
72
Lens Width
30
Point Dots
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add lens-range

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Line and lens color.
pointsnumber72Total samples in the overview.
windowSizenumber30Starting width of the lens, as a percentage.
showDotsbooleantrueShow sample dots when zoomed in.
speednumber100Playback speed of entry and transition animations, as a percentage.