Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Dual Series Sparkline Stats Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A dual-series sparkline for React with Base 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.

What moves, and what about reduced motion?

The header and the figure fade up once, the lines draw from start to end and the totals roll up. Flipping the switch fades last week's line. With reduced motion every transition is off.

How does it fit on a phone?

The switch drops under the header's sentence, the chart keeps its height and the two totals sit side by side. Nothing scrolls sideways at 320 pixels.

  • Pro

    Sparkline Stats

    Sparklines

    Three sparkline cells for a web-analytics tool, each with its figure for the last seven days, its change on the seven before and thirty days of line under a soft fade.

  • Pro

    Sparkline Range Card Stats

    Sparklines

    A price inside its 52-week range for a trading journal: a line between two labelled hairlines for the high and the low, today's close as a dot, and the position in the range as a percent and a meter.

  • Pro

    Dual Series Area Chart Stats

    Area and line

    Home-solar generation against use over one day: two overlapping areas in two weights, the surplus hours hatched, a legend and a band of three totals under the chart.

  • Pro

    Period Comparison Table Stats

    Comparisons

    A five-row month-on-month report with this period, the period before, and a bar for the size of each change.

  • Pro

    Shared-Scale Week Comparison Stats

    Comparisons

    A week-on-week traffic comparison with two sparklines drawn on one shared scale, so the two weeks can be compared by eye.

  • Pro

    Grouped Bar Chart Stats

    Bar and column

    Two bars per month, this year solid and last year lighter, with a Chart and Table switch that swaps the drawing for a real table of the same numbers in the same box.

All 122 stats blocks