Range Line Chart
A price chart card with 1D / 1W / 1M / 1Y tabs; the line morphs between ranges and a crosshair reads any point.
range-line-chart.tsxrange-line-chart.css
Checking access…
Overview
Switching range morphs the existing path into the new one instead of redrawing, and the headline change re-computes for that period.
Hover or drag to move a crosshair; the big number and date follow it, then snap back to the latest value when you leave.
When to use
- Finance, analytics and pricing cards.
When not to use
- Comparing several series: use a multi-line chart with a legend.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/range-line-chart.json$
npx shadcn@latest add https://sundaeui.dev/r/range-line-chart.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/range-line-chart.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/range-line-chart.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy range-line-chart.tsx and range-line-chart.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { RangeLineChart } from '@/components/sundae/range-line-chart'
<RangeLineChart />Props
| Prop | Type | Default |
|---|---|---|
series*Values per range key. | Record<string, number[]> | — |
formatValue formatter. | (n: number) => string | — |
labelsPoint label per range. | Record<string, (i: number) => string> | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Range tabs are a radiogroup; the chart is an image with a summary of first, last and change.
- Arrow keys move the crosshair when the chart is focused.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-rlc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Move crosshair
FAQ
- Is Range Line Chart free?
- Range Line Chart is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Range Line Chart?
- Run npx shadcn@latest add https://sundaeui.dev/r/range-line-chart.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Range Line Chart support keyboard and screen readers?
- Range tabs are a radiogroup; the chart is an image with a summary of first, last and change. Arrow keys move the crosshair when the chart is focused.
- Does Range Line Chart respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Price History
Data · Refined Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined Weather Forecast
Data · Refined