Chart Components

Reusable, SSR-safe data visualisation components from ~/components/ui/Charts — pure SVG + Tailwind, no charting library

Bar Chart

Vertical bars with Y-axis, gridlines and hover tooltips — heights computed against a rounded axis maximum.

£10.0k£7.5k£5.0k£2.5k£0.0k
£4.2k
£5.8k
£3.9k
£7.4k
£6.1k
£8.9k
JanFebMarAprMayJun

Line Chart

Multi-series line chart with automatic legend, gridlines and per-point tooltips.

This weekLast week
2,5001,2500This week · Mon: 1,240This week · Tue: 1,580This week · Wed: 1,410This week · Thu: 1,890This week · Fri: 1,720This week · Sat: 2,100This week · Sun: 1,950Last week · Mon: 980Last week · Tue: 1,210Last week · Wed: 1,350Last week · Thu: 1,420Last week · Fri: 1,380Last week · Sat: 1,690Last week · Sun: 1,540
MonTueWedThuFriSatSun

Area Chart

LineChart with the area prop — gradient fill under the line.

100500Signups · W1: 32Signups · W2: 48Signups · W3: 41Signups · W4: 65Signups · W5: 58Signups · W6: 79Signups · W7: 84Signups · W8: 91
W1W2W3W4W5W6W7W8

Donut & Pie Charts

Segment shares are computed from the data — no hardcoded dash offsets.

Donut — Traffic Sources

Organic: 48 (48%)Direct: 22 (22%)Referral: 18 (18%)Social: 12 (12%)
4sources
Organic48%
Direct22%
Referral18%
Social12%

Pie — Devices

Desktop58%Mobile34%Tablet8%

Gauges & Sparklines

KPI patterns for dashboards.

Health Score

72of 100

Metric Cards with Sparklines

£38,900
Monthly Revenue
+12.4% vs last month
17
Active Projects
+3 vs last month
2.1h
Avg. Response
-18% vs last month

Ranked & Stacked Bars

Horizontal bars for ranked lists; stacked bar for part-of-whole over categories.

Top Pages — Views

/services
2,140
/tools
1,830
/sage-connector
1,240
/about
760
/contact
540

Lead Sources — Q3

45%
25%
20%
10%
Organic45Referral25Paid20Social10

Progress Indicators

ProgressBar from ~/components/ui/Loading for completion-style metrics.

Project completion75%
Sprint burndown92%
Budget used38%

Usage

import { BarChart, DonutChart, LineChart } from "~/components/ui";

<BarChart
  data={[{ label: "Jan", value: 4200 }, { label: "Feb", value: 5800 }]}
  formatValue={(v) => `£${v.toLocaleString()}`}
/>

<DonutChart
  segments={[{ label: "Organic", value: 48 }, { label: "Direct", value: 22 }]}
/>

<LineChart
  series={[{ name: "Visitors", data: [12, 18, 15, 22] }]}
  xLabels={["W1", "W2", "W3", "W4"]}
/>