Line & bar chart components

Installation

npx @properui/cli@latest add line-bar-charts

Chart examples

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.
• chartColors is the same list already resolved to CSS variables ("var(--color-utility-brand-600)", …). Use it directly as a fill, stroke, or inline style.color wherever a chart assigns color in a loop — a variable number of series, categories or stages — instead of one hand-picked className per series, which is the pattern the fixed-series examples above use instead (className="text-utility-brand-600" paired with stroke="currentColor"/fill="currentColor"). Either is a token; reach for the array form once the number of series isn't fixed at build time.
• 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 small-multiples grid, a funnel's stages, a heatmap-style scale.

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) 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.