ChartCard

organisms

Card with header (title + Pill-group range selector) + area chart visualization + day labels. Used for Revenue Overview.

ARIA Role: region

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default
`title`	`string`	Yes	`—`
`ranges`	`RangeConfig[]`	Yes	`—`
`data`	`ChartData`	Yes	`—`

TypeScript Interface

interface ChartCardProps {
  title: string;
  ranges: { id: string; label: string }[];
  activeRange: string;
  onRangeChange: (id: string) => void;
  data: { points: { x: number; y: number }[]; labels: string[] };
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

[type]All props required; ranges bounded 2-6 (NASA Rule 2)(NASA Rule 2 + 5)
[aria]Chart wrapper must have role='region' and aria-label; chart SVG itself must be aria-hidden (text alternative provided separately)(WCAG 1.1.1)

Usage

Import

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

Basic

<Chartcard />

With Variants

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