AreaChart

Filled areas per series over categories, stacked into a total or overlapping from zero.

Charts@gaudi/design-system/charts/AreaChartView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system recharts

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { AreaChart } from '@gaudi/design-system/charts/AreaChart';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/area-chart-annotated-traffic.json.

Usage

import { AreaChart } from '@gaudi/design-system/charts';
<AreaChart title='Readers by device' ariaLabel='Daily readers by device' data={days} series={devices} stacked showLegend />

Examples

Annotated traffic with keyboard reading

Storybook

Fills, curves and stacking

Storybook

API

20 props

Accessibility

The plot is one tab stop named by ariaLabel. The arrow keys walk the points, Home and End jump to the ends, Enter or Space activates and Escape clears; the active point is drawn and read out politely. Every value is mirrored in a data table, and the SVG is hidden from assistive technology.

CardCard frames reusable content with title, subtitle, and optional children.8 examples ChartFrameThe frame every chart renders in: a captioned figure with one keyboard stop and a readout, loading, empty, invalid and error states, locale-aware numbers and a data table built from points. Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.1 example ToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examples FieldField composes form label, description, error, and input building blocks.7 examples SwitchSwitch renders a token-styled boolean preference control.4 examples