Summary Line Chart

Plot several metrics that share a time axis, with a summary column on the right listing each line's value at the active point and its change versus the previous point. On entrance the lines draw in one after another; once drawn, the summary numbers roll digit by digit from 0 to the latest values. As the pointer moves over the plot, a crosshair and a dot on each line follow on a spring, every summary number rolls to that point, and leaving the plot returns to the default point. Summary rows double as the legend — click one to hide or show its line, and the Y ticks recompute from the remaining lines and tween into place. Hand-drawn SVG, no charting library.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SummaryLineChart/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/summary-line-chart.en.json

Usage

import { SummaryLineChart } from "@/components/ui/summary-line-chart";

<SummaryLineChart
  labels={["Wk 1", "Wk 2", "Wk 3", "Wk 4"]}
  series={[
    { key: "signups", label: "Sign-ups", values: [820, 910, 880, 1040] },
    { key: "paid", label: "Paid", values: [62, 70, 74, 81] },
  ]}
  curve="smooth"
  showArea
  formatValue={(v) => `${v.toLocaleString("en-US")} users`}
/>

Props

SummaryLineSeries

CSS variables

How it works

• The smooth curve is a Fritsch–Carlson monotone cubic: flat stretches never bulge or dip, so the line always stays inside the data range.
• Rolling digits: each digit is a 0–9 column that springs (stiffness 300, damping 30) to its target. Columns are aligned by position from the right, so ones and tens stay put when the digit count changes. Commas, signs and custom units render as-is.
• The change rate is computed against the previous point; the first point, or a previous value of 0, shows "—". Positive values use the accent with a rising icon, negative values use rose with a falling icon.
• Hiding a line fades it out over 200ms; the Y axis recomputes "nice" ticks (multiples of 1, 2, 2.5, 5, 10) from the visible lines only, and the grid and every path tween to their new positions.
• Width is measured with ResizeObserver; SSR and the pre-measure render use a 560px fallback. With enough room the summary sits on the right, otherwise it stacks below (container query).
• The entrance fires once when the chart scrolls into view (useInView).

Accessibility

• The SVG has role="img" with a generated summary aria-label, plus an sr-only <table> (header row of points in time, one row of values per line)
• The plot is focusable with Tab; ←/→ switch points in time and Home/End jump to either end, with a focus-visible ring
• An aria-live="polite" region in the summary column announces the point's values and change rates only on keyboard moves; pointer movement is not announced so screen readers are not flooded
• Summary rows are buttons with aria-pressed, and their aria-label includes the name, current value, change rate and hide/show hint; the rolling digits are hidden from assistive tech
• When the OS "reduce motion" setting is on, lines and areas render in their final state, numbers switch without rolling, and the crosshair and dots stop springing; the tooltip and keyboard control still work