ChartFrame

The 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.

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

Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.

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 { ChartFrame } from '@gaudi/design-system/charts/ChartFrame';

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

Usage

import { ChartFrame, useChartFrame } from '@gaudi/design-system/charts';
<ChartFrame title='Writing goals' ariaLabel='Progress towards writing goals' points={points} showData='toggle'>  <GoalBars /></ChartFrame>

Examples

Loading, empty, invalid, error and locale

Storybook

API

19 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.

ToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examples BarChartBars per category: single, grouped or stacked, upright or on their side, with references, annotations and a highlighted bar.2 examples AreaChartFilled areas per series over categories, stacked into a total or overlapping from zero.2 examples BoxPlotChartDistributions side by side: median, quartiles, whiskers at 1.5 × IQR and outliers, from raw samples or precomputed summaries.1 example ComposedChartBars, lines and areas on one category axis, with a right-hand axis for a series in other units.DonutChartParts of a whole as a donut with a centre summary, or a pie (PieChart); slices are selectable and small ones fold into Other.2 examples