Charts — Petanque Life Design

10 data-viz primitives sharing a single dark-mode-aware palette. Every chart renders an aria-label summary so screen readers get the takeaway without walking each data point.

Sparkline — 14-day ranking trend

+62 positions over 14 days

Bar chart — matches per month

Mar

Apr

May

Jun

Jul

Aug

Donut — win / loss distribution

Wins · 75%

Losses · 25%

Full primitive set

Sparkline
BarChart
LineChart
DonutChart
Gauge
TournamentBracket
HeatMap
RankingCard
StackedBar
SmallMultiples

tsx · view.tsx

import { Sparkline, BarChart } from '@petanque-life/shared/charts/web';

<Sparkline
  data={[4,8,6,10,7,12,9,14,11,16,13,18,15,20]}
  width={240}
  height={60}
  ariaLabel="Ranking trend — 14 days, net +62 positions"
/>

<BarChart
  data={matches}
  xKey="month"
  yKey="count"
  palette="brand"
/>

Prop	Type	Default	Description
data	number[] \| Record<string, number>[]	— (required)	Values to plot. Shape depends on chart type.
width	number	responsive	Fixed pixel width. Omit to fill container.
height	number	variant-driven	Fixed pixel height.
palette	"brand" \| "accent" \| "mono"	"brand"	Colour ramp. Dark-mode aware.
ariaLabel	string	— (required)	Plain-language summary for screen readers.