Chart

organisms

Chart wrapper for line, bar, donut, sparkline. Recharts/Victory integration point.

ARIA Role: img

Demo

Demo for Chart (organisms)

Chart wrapper for line, bar, donut, sparkline. Recharts/Victory integration point.

Props

Prop	Type	Required	Default	Description
`type`	`'line' \| 'bar' \| 'donut' \| 'sparkline'`	Yes	`—`	Chart type
`data`	`ChartData[]`	Yes	`—`	Chart data points
`title`	`string`	No	`—`	Chart title
`height`	`number`	No	`300`	Chart height in pixels
`colors`	`string[]`	No	`—`	Chart colors

TypeScript Interface

interface ChartProps {
  type: 'line' | 'bar' | 'donut' | 'sparkline';
  data: ChartData[];
  title?: string;
  height?: number;
  colors?: string[];
}

Assertions (NASA Rule 5)

[aria]Container must have role='img' with aria-label or aria-labelledby(WCAG 1.1.1)
[aria]Provide data table alternative (visually-hidden but accessible)(WCAG 1.1.1)
[validation]Color is not the only visual encoding (use patterns/labels too)(WCAG 1.4.1)

Usage

Import

import { Chart } from '@epasslive/design-system'

Basic

<Chart />

With Variants

<Chart variant="primary" size="md" />