Sparkline components

Installation

npx properui@latest add sparklines

Sparkline examples

Sparkline props

Sparkline is a standalone component (sparkline.tsx), separate from the chart demos above, meant to be dropped into a metric card's footer or a table cell rather than copied per use.

Chart colours

Every chart in this section colors its series from the same ordered token list, chartColorTokens / chartColors, exported from charts-base:

import { chartColorTokens, chartColors, sequentialScale } from "@properui/ui/components/application/charts/charts-base";

• chartColorTokens is the ordered list of utility color keys to assign to an unknown number of categorical series by index — chartColorTokens[i % chartColorTokens.length] — starting with brand-600 for the primary series, then alternating cool and warm hues so adjacent series never sit close on the color wheel. red-*, slate-* and neutral-* are deliberately left out: red is reserved for negative values and errors elsewhere in the library, and slate/neutral read as muted or disabled. Sparkline's own color prop takes a bare key from this same scale, e.g. chartColorTokens[0], or an explicit "green-500"/"red-500" for a metric whose direction of change carries meaning.
• chartColors is the same list already resolved to CSS variables ("var(--color-utility-brand-600)", …), for a chart that assigns color in a loop instead of one hand-picked className per series.
• sequentialScale(tokenPrefix) builds a light-to-dark scale from one utility color family, for a series that is ordered or quantitative rather than categorical.

A raw palette class (bg-purple-600) or an arbitrary value (fill-[#7f56d9]) is never correct here, even inside a chart: reach for a token, either as a Tailwind utility (text-utility-brand-600, paired with stroke="currentColor"/fill="currentColor") or as the CSS variable from chartColors above.

Charts never use a dark: utility. A .dark-mode class on an ancestor repoints every --color-utility-* variable these charts read from, in both the className+currentColor pattern and the chartColors CSS-variable values — a chart built from these tokens is already correct in both themes.