Sparkline
Renders a dependency-free inline trend path while preserving NaN gaps.@gemologic/sheen-charts · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Sparkline values={latency} label="Latency over five samples" color="chart-3" />Variant matrix
Latency trend with a gap
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/Sparkline.tsx- Tokens
--sheen-chart-1--sheen-chart-line-width--sheen-color-market-up--sheen-color-market-down--sheen-color-market-flat--sheen-color-accent
Accessibility
Role: imgKeyboard: No component-owned keysDo
- Use NaN for missing values and describe the trend in label.
Do not
- Do not coerce gaps to zero or use a sparkline as the only representation of important data.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
values * | Float64Array<ArrayBufferLike> | — | Float64 values in display order; NaN creates a visible path break. |
label * | string | — | Required accessible description of the trend. |
color | import("./chart-types.ts").ChartColorToken | chart-1 | Semantic chart, market, or accent token name. |
width | number | 120 | Positive finite intrinsic and view-box width. |
height | number | 28 | Positive finite intrinsic and view-box height. |