Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Chart

Chart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.

MDX@gaudi/design-system/mdx/ChartView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

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

import { Chart } from '@gaudi/design-system/mdx/Chart';

Usage

<Chart  type='line'  title='Readers by channel'  ariaLabel='Monthly readers by channel'  data={[    { label: 'Jan', search: 1840 },    { label: 'Feb', search: 2110 }  ]}  yKey='search'/>
<DonutChart title='Essays by topic' data={[{ label: 'Data', value: 42 }, { label: 'Engineering', value: 28 }]} />

Examples

Playground

Storybook

Writing a chart in MDX

Storybook

API

28 props

Accessibility

Every chart is a captioned figure whose plot is one tab stop with a name and the role description "chart". The arrow keys walk the points (Up and Down move between rows on a heatmap), Home and End jump to the ends, Enter or Space activates the point, and Escape clears it; the active point is drawn on the chart and read out in a polite live region. Every value is also in a data table, hidden by default and shown with showData. Loading sets aria-busy, invalid and error states are alerts, and the SVG itself is hidden from assistive technology because the table carries the same data.

AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.DetailsExpandable article details with an explicit summary.