Clinia UI

Chart

Recharts charts wired to the chart tokens, with a themed tooltip and legend.

shadcn docs →

When to use

  • A trend or a comparison that reads faster as a shape than as numbers: visits per month, sync volume by source.
  • Up to five series, one colour token each.

When not to use

  • One number that matters: show it as text in a Card.
  • Exact values users look up or copy: use Table.
  • Progress toward a known total: use Progress.

Install

npx shadcn@latest add @clinia/chart

Virtual visits passed in-person visits in August.

Clinia rules

  • Series colours come only from var(--chart-1) to var(--chart-5) in the ChartConfig. Never pass a raw hex.
  • --chart-1 is Trust in both themes: give it the series that matters most, and order the rest by importance.
  • Series labels in ChartConfig are sentence case (In person), since the legend and tooltip show them as written.
  • Bar charts start their value axis at zero. A cropped axis exaggerates small differences.
  • Gauges, radars, range plots, ranked bars, sparkbars, status colours and hand-drawn SVG charts: see [Charts](/docs/app/charts).

Do and don't

Do keep the legend so each series has a name.
Don't leave users to guess which colour is which.
Do start the value axis at zero.
Don't crop the axis so a small change looks large.

Accessibility

Built in

  • Series colours come from --chart-1 to --chart-5, led by Trust. Not every series colour clears 3:1 on the card, so keep the legend: colour alone doesn't identify a series.
  • accessibilityLayer makes the chart keyboard-navigable and reads each value out.
  • The tooltip sets values in font-mono tabular-nums, so numbers line up as the pointer moves.

Your responsibility

  • Keep ChartLegend whenever there are two or more series.
  • Write the takeaway in text next to the chart (Virtual visits passed in-person visits in May.), or link to the same data as a Table.
  • Add accessibilityLayer to the Recharts chart, as in the demo.

How to test

  1. Press Tab until the chart has focus, then press the arrow keys: the tooltip moves from one data point to the next.
  2. Toggle the site theme: every series stays distinct from the card and from its neighbours.
  3. Hide the colours (a greyscale filter in DevTools): the legend order and the text summary still tell the series apart.

API

ChartContainer

PropValuesDefaultDescription
config
ChartConfig
–

Label and colour per series. Colours should be var(--chart-1) to var(--chart-5).

initialDimension
{ width: number; height: number; }
INITIAL_DIMENSION

Size used before the container is measured, to avoid a layout jump.

ChartTooltipContent

PropValuesDefaultDescription
hideLabel
boolean
false

Hides the tooltip's heading (the category).

hideIndicator
boolean
false

Hides the colour marker next to each value.

indicator
linedotdashed
dot

Marker next to each value in the tooltip.

nameKey
string
–

Data key that names each series, when it isn't the dataKey.

labelKey
string
–

Data key for the tooltip heading.

ChartLegendContent

PropValuesDefaultDescription
hideIcon
boolean
false

Hides the colour swatch in the legend.

nameKey
string
–

Data key that names each series, when it isn't the dataKey.

All other props come from Recharts.

Related