shadcn.io is not affiliated with official shadcn/ui
Dual Series Sparkline Stats Block for Radix UI
This week's opens against last week's on one scale, with a switch that shows or hides the second line, its total and the difference.
Installation
Overview
A dual-series sparkline for React with Radix UI. A start-aligned header states how opens moved, "Opens are up 9.0% on last week", with a switch at its end: Compare with the previous period. Below it, a framed figure (a hairline frame with a + on each corner) draws this week's opens by day as a solid 2 pixel line with a dot on each day, and last week's as a lighter, thinner, dashed line behind it on the same scale, with value labels and weekday names and a small legend. Under the chart, a band of two totals and one line for the difference. The switch shows or hides last week's line, its total and the difference; the difference is worked out from the two series, so it always agrees with the drawing. Nothing changes height when it flips, a polite live region says what changed, and the same numbers are in a table for screen readers. It is built from Guides, Switch, the Sliding Number and hand-drawn SVG, and uses no colour: the two lines differ by weight, width and dash.
FAQ
How do I change the data?
Edit THIS_WEEK and LAST_WEEK, seven readings each. The totals, the difference, the headline, the scale (rounded to whole thousands) and every point are computed from them. For another period, change DAYS and the labels, and the points follow.
What does the switch do?
It is on by default. Turning it off fades last week's line and its legend entry, swaps its total for "Last week is hidden." and replaces the difference with "Comparison is off."; turning it on brings them back. The shared scale never changes, so this week's line doesn't move.
The switch is controlled with checked and onCheckedChange, which gives the new state.
Is it accessible?
Yes. The switch has a name that matches its visible text. The drawing is hidden from assistive technology and an equivalent table (day, this week, last week) is read instead; the totals are a description list, and the difference line is a polite live region, so toggling announces what appeared or went. Values sit in bdi elements and the chart is dir="ltr".
How are the two lines told apart without colour?
This week is solid, 2 pixels, full strength and has a dot on each day; last week is 1.5 pixels, 55% strength and dashed, with no dots. The legend repeats both samples.