DATA AND TABLES

Charts

Draft

A set of data visualisation components for presenting quantitative information as graphical displays.

Usage

Charts preview coming soon

Common alternative names

Data visualization, graphs, plots

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Available chart types

Bar Chart

Compares discrete categories using horizontal or vertical bars. Best for showing rankings, comparisons across groups, or changes over a small number of time periods.

import { BarChart } from '@arch-ui/components';

<BarChart
  caption="Revenue by quarter"
  data={[
    { label: 'Q1', value: 12000 },
    { label: 'Q2', value: 18500 },
    { label: 'Q3', value: 15200 },
    { label: 'Q4', value: 21000 },
  ]}
/>

---

Line Chart

Displays trends over a continuous axis (typically time). Best for showing change over time, growth rates, or comparing multiple series.

import { LineChart } from '@arch-ui/components';

<LineChart
  caption="Daily active users"
  series={[
    { label: 'Mobile', data: [120, 150, 180, 200, 175] },
    { label: 'Desktop', data: [90, 85, 95, 110, 105] },
  ]}
  xLabels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
/>

---

Area Chart

Similar to a line chart but with the area below the line filled, emphasising volume or cumulative totals.

import { AreaChart } from '@arch-ui/components';

<AreaChart
  caption="Storage usage over time"
  data={[10, 25, 40, 55, 70, 68, 75]}
  xLabels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
/>

---

Pie / Donut Chart

Shows proportions of a whole. Use when there are fewer than six segments and the goal is to show relative share.

import { DonutChart } from '@arch-ui/components';

<DonutChart
  caption="Traffic sources"
  data={[
    { label: 'Organic', value: 45 },
    { label: 'Paid', value: 30 },
    { label: 'Referral', value: 15 },
    { label: 'Direct', value: 10 },
  ]}
/>

---

Expected common props

Prop	Type	Default	Description
caption	string	--	Accessible description of the chart. Required.
data	DataPoint[] | Series[]	--	The data to visualise. Shape varies by chart type. Required.
height	number | string	300	Chart height.
colorScale	string[]	--	Custom colour palette. When omitted, uses the design system's categorical colour tokens.
showLegend	boolean	true	When true, renders a legend.
showTooltip	boolean	true	When true, hovering a data point shows a tooltip with the exact value.
animate	boolean	true	When true, the chart animates on initial render.
className	string	--	Additional class names.

---

Design guidance

• Use colour tokens -- chart colours should come from the design system's categorical palette tokens rather than arbitrary hex values. This ensures consistency and accessibility across themes.
• Always provide a caption -- even though charts are visual, the caption gives screen readers and search engines context.
• Limit categories -- pie and donut charts work best with fewer than six segments. For more categories, use a bar chart.
• Label axes -- line and bar charts should include axis labels that clarify what the numbers represent.

---

Accessibility

• Every chart renders a caption or aria-label describing its purpose.
• Data points should be reachable via keyboard. Each segment, bar, or point is focusable and reveals a tooltip on focus.
• Charts should include a visually hidden data table fallback so screen reader users can access the underlying data.
• Colour alone should not be the only differentiator between series. Use pattern fills, labels, or distinct marker shapes alongside colour.
• Animations respect prefers-reduced-motion: reduce.