Proper UI

Scatter & bubble chart components

Free and open-source React scatter and bubble chart components built for modern applications and websites. These charts are built using Recharts and styled with Tailwind CSS.

Installation

npx properui@latest add scatter-bubble-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, for a chart that assigns color in a loop instead of one hand-picked className per series — the bubble chart's per-channel Scatters and the categorical scatter chart's per-cohort Scatters both read from it this way.
  • 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.