Sparkline Scrub Cell
An inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.
- Category
- Components
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useCallback, useMemo, useRef, useState } from "react";
const W = 220;
const H = 56;
/**
* xmur3-style integer hash into an xorshift walk: deterministic, so the server
* and the client render byte-identical markup. Math.random here is a hydration
* mismatch, not a cosmetic one.
*/
function series(seed: string, n: number): number[] {
let h = 2166136261 >>> 0;
for (let i = 0; i < seed.length; i++) {
h ^= seed.codePointAt(i)!;
h = Math.imul(h, 16777619) >>> 0;
}
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Most sparklines are drawn either as raw polylines, which look harsh at small sizes, or with a generic smoothing spline, which looks better and is quietly wrong. Catmull-Rom and its relatives overshoot between samples, so a smoothed chart regularly renders a dip or a peak that does not exist in the underlying series — on a revenue figure or a latency graph that is a correctness bug wearing a nicer curve. This uses Fritsch–Carlson monotone cubic interpolation instead: tangents are forced to zero wherever the slope changes sign and clamped to three times the smaller adjacent slope elsewhere, which guarantees the curve stays inside the interval its own samples define. Two smaller details matter nearly as much. The stroke carries a non-scaling vector effect, without which a stretched viewBox turns an even line into a ribbon that is thick on the shallow segments and thin on the steep ones — the most common sparkline defect there is. And the scrub snaps to the nearest sample rather than to the path, because reading a value off the interpolation shows the user a number that was never measured.
Curator’s note
The monotone clamp is a correctness fix, not a styling one — smoothed sparklines routinely draw peaks that are not in the data.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Sortable Data Table
componentsA searchable table with three-state column sorting and a real loading skeleton.
Stroke Draw Button
componentsA button whose outline draws itself around the shape on hover, at any size.
Scrub Timeline Player
componentsA media scrubber with buffered range, hover timestamp and pointer-capture dragging.