Sparkline Trace
A free time-series trace that keeps irregular spacing and every exact reading visible.
- Monday, 07:00: 1.82 m
- Tuesday, 07:00: 1.91 m
- Thursday, 07:00: 2.04 m
- Friday, 07:00: 1.98 m
- Sunday, 07:00: 2.16 m
Customise
Code
<StatSparklineTrace
label="River height at the north reach"
samples={samples}
unit=" m"
/>Sparkline Trace is a free React and Next.js component for showing one supplied numeric time series. Its SVG places readings by their actual time and value, while an ordered list keeps every timestamp and exact value readable below the plot.
The component accepts a label, two to twenty-four ordered samples, and an optional literal unit. It does not invent data or round displayed readings. Server rendering, print, reduced motion, forced colours, hidden pages and offscreen views retain the final trace and complete reading list.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/stat-sparkline-traceUsage
import { StatSparklineTrace } from "@/components/stat-sparkline-trace";
const samples = [
{ id: "monday", time: 0, timeLabel: "Monday, 07:00", value: 1.82 },
{ id: "tuesday", time: 1, timeLabel: "Tuesday, 07:00", value: 1.91 },
{ id: "thursday", time: 3, timeLabel: "Thursday, 07:00", value: 2.04 },
];
export default function RiverReport() {
return (
<StatSparklineTrace
label="River height at the north reach"
samples={samples}
unit=" m"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Visible name for this measured series; it must not be blank. |
| samples | ReadonlyArray<{ id: string; time: number; timeLabel: string; value: number }> | required | Two to twenty-four unique, ordered readings with finite times and values and nonblank labels. |
| unit | string | "" | Literal text appended to every exact value, such as ` m` or ` days`. |
| className | string | undefined | Additional classes merged onto the figure root. |
Customisation
Supply your own series, units and width. The component exposes three scoped colour and timing variables; all have theme-token fallbacks, and motion remains a finite opacity crossfade.
<StatSparklineTrace label="Production lead time" samples={leadTimes} unit=" days" />
:root {
--sparkline-ink: var(--primary);
--sparkline-label: var(--foreground);
--sparkline-duration: var(--dur-3, 600ms);
}Frequently asked questions
- Is Sparkline Trace free for commercial projects?
- Yes. The component is MIT licensed and can be used in personal and commercial projects.
- Does it change or round my readings?
- No. It plots the supplied finite values in their supplied order and prints each value with JavaScript's exact string representation and your literal unit. Invalid input remains visible as a reading list without a plotted path.
- Is it accessible and safe with reduced motion?
- Yes. A visible figure caption and labelled range introduce the chart, while an ordered list provides every timestamp and exact value. The SVG is decorative; reduced motion, print, forced colours, server rendering, hidden documents and offscreen roots retain the final path without travel.
- How do I retheme the trace?
- Set the sparkline-ink, sparkline-label and sparkline-duration CSS variables on an ancestor. You can also pass className for layout and surface styling.