Skip to main content

Chart

Implemented

Dependency-free line/bar/donut/sparkline chart — hand-rolled token-driven SVG with a visually-hidden data table (WCAG 1.1.1). No chart library; for recharts-based organisms see StackedBarChart / TimeSeriesAreaChart.

Categoryorganisms
Sourcecomponents/organisms/Chart/Chart.tsx
AI HintUse for single-series line/bar/donut/sparkline data visualizations — zero chart-library dependency, fully token-driven palette. For multi-series stacked bars or gradient time-series areas, use StackedBarChart / TimeSeriesAreaChart instead.

Chart component. The sr-only data-table strings (srTableCaption / srLabelHeader / srValueHeader) default to English — French consumers should pass localized strings (e.g. "Données du graphique" / "Étiquette" / "Valeur").

Chart

design-system

Chart component preview and API reference.

Props

Preview

Chart

Prop
Type
Required
Default
Description
type
'line' | 'bar' | 'donut' | 'sparkline'
Required
—

Chart type

data
ChartPoint[]
Required
—

Chart data points

title
string
Optional
—

Chart title

height
number
Optional
300

Chart height in pixels

colors
string[]
Optional
—

Chart colors

ariaLabel
string
Optional
—

Overrides the auto-generated accessible name. Default: `title: ` prefix + every data point (`label value`) spelled out — pass a concise summary instead.

srTableCaption
string
Optional
"Chart data"

Caption for the visually-hidden data table (screen readers). French consumers should pass localized string.

srLabelHeader
string
Optional
"Label"

Header for the label column in the sr-only data table. French consumers should pass localized string.

srValueHeader
string
Optional
"Value"

Header for the value column in the sr-only data table. French consumers should pass localized string.

Quick use:<Chart />

Accessibility

ARIA roleimg

ARIA

2 rules

WCAG 1.1.1

Container must have role='img' with aria-label or aria-labelledby

WCAG 1.1.1

Provide data table alternative (visually-hidden but accessible)

validation

1 rule

WCAG 1.4.1

Color is not the only visual encoding (use patterns/labels too)

Usage

Import

tsxSnippet
import { Chart } from "@epasslive/design-system"

Example 1

tsxSnippet
<Chart type="line" data={data} />

Example 2

tsxSnippet
<Chart type="bar" data={data} title="Sales" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

Design System v4.1.0 | ePassLive