Component reference
Sparkline
Add a compact, accessible trend to a metric or table cell.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { Sparkline } from "@pimolu/react";
export function SparklineExample() {
const data = [18, 23, 20, 31, 28, 36, 42];
return (
<Sparkline
aria-label="Fictional Sparkline dataset"
data={data}
width={240}
height={64}
/>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Filled trend
Add subtle area emphasis to a compact metric.
A falling metric
A downward trend can be desirable, for example for latency.
Stable values
Represent a constant series without inventing variation.
Named-part customization
Style this chart directly through typed geometry and surface hooks.
Usage
Provide data in chronological order. area fills below the trend, and color accepts an explicit stroke color. Use a full chart when readers need axes or interactive exploration.
Use valueFormatter for readable units. These charts do not implement zoom, pan or time-axis aggregation. Demo data is fictional.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSparklineProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
classNames | PimoluClassNames<"chart"> | undefined | — | Additive classes for stable named parts, including composed descendants. Parts: area, axis, axisLabel, axisTitle, bar, canvas, centerLabel, centerValue, cursor, donutTrack, empty, grid, legend, legendItem, legendLabel, legendSwatch, legendValue, line, point, root, segment, srOnly, svg, tooltip, tooltipRow, valueLabel. Parts render only when the corresponding component or state is present. |
dataRequired | number[] | [] | Trend values, oldest first. |
area | boolean | undefined | false | Fills the area under the line. Defaults to false. |
color | string | undefined | — | Explicit line colour. Falls back to the primary token. |
width | number | undefined | 160 | viewBox width. Defaults to 160. |
height | number | undefined | 40 | viewBox height. Defaults to 40. |
valueFormatter | ((value: number) => string) | undefined | — | Formats values in the hidden data table. |
emptyLabel | string | undefined | — | Text announced when there is nothing to draw. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
classNamesPimoluClassNames<"chart"> | undefinedNo default extracted.
Additive classes for stable named parts, including composed descendants. Parts: area, axis, axisLabel, axisTitle, bar, canvas, centerLabel, centerValue, cursor, donutTrack, empty, grid, legend, legendItem, legendLabel, legendSwatch, legendValue, line, point, root, segment, srOnly, svg, tooltip, tooltipRow, valueLabel. Parts render only when the corresponding component or state is present.
dataRequirednumber[]Default: []
Trend values, oldest first.
areaboolean | undefinedDefault: false
Fills the area under the line. Defaults to false.
colorstring | undefinedNo default extracted.
Explicit line colour. Falls back to the primary token.
widthnumber | undefinedDefault: 160
viewBox width. Defaults to 160.
heightnumber | undefinedDefault: 40
viewBox height. Defaults to 40.
valueFormatter((value: number) => string) | undefinedNo default extracted.
Formats values in the hidden data table.
emptyLabelstring | undefinedNo default extracted.
Text announced when there is nothing to draw.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Give the chart a descriptive aria-label including its units. A hidden data table provides the individual observations.
- Do not rely on color alone.