Chart

Recharts wrapper components with token-based colors and sensible defaults. Ships Bar, Line, Area, Pie, and Donut chart variants — all responsive by default.

✓Bar, Line, Area, Pie, and Donut variants
✓Responsive by default (100% width)
✓Token-based color palette via CSS variables
✓Accepts series array with optional per-series colors

import { Chart }from "@aetherstack/ui"

chart.tsx

import { BarChart } from "@/components/ui/chart"

const data = [
  { month: "Jan", revenue: 4000 },
  { month: "Feb", revenue: 3000 },
  { month: "Mar", revenue: 5000 },
  { month: "Apr", revenue: 4500 },
  { month: "May", revenue: 6000 },
  { month: "Jun", revenue: 5500 },
]

export function ChartDemo() {
  return (
    <BarChart
      data={data}
      series={[{ dataKey: "revenue" }]}
      height={220}
    />
  )
}

Usage

Bar chart

Display categorical data as vertical bars.

Line chart

Track trends over time with a line chart.

Multi-series

Pass multiple series objects to overlay data sets.

Props

Prop	Type	Default	Description
data	Record<string, unknown>[]	—	Array of data objects. Each key maps to a dataKey in series.
series	{ dataKey: string; color?: string }[]	—	Defines which keys to render. Optional color overrides the default token.
height	number	300	Fixed pixel height of the chart container.
className	string	—	Additional Tailwind classes on the wrapper element.

* Required props

Accessibility

→Charts are rendered as SVG — add an aria-label or visually hidden description for screen reader users.
→Recharts tooltips are not keyboard accessible by default; consider pairing with a data table for full accessibility.
→Use sufficient color contrast when overriding series colors.