ChartContainer

A figure for any chart: title, a one-line summary, the chart and a required data table people can open.

Pro
Version 2.0.0-rc.1
APG pattern: Figure with a data table fallback

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Signups by monthSignups more than tripled from July to October.

Table shown

Signups by monthSignups more than tripled from July to October.

Month	Signups
July	120
August	180
September	240
October	410

Tokens

The 14 design tokens ChartContainer reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 14 tokens

Tokens ChartContainer reads
Token	Value now	CSS variable
color.bg.canvas	…	`--sd-color-bg-canvas`
color.border.default	…	`--sd-color-border-default`
color.text.default	…	`--sd-color-text-default`
color.text.link	…	`--sd-color-text-link`
color.text.secondary	…	`--sd-color-text-secondary`
motion.duration.fast	…	`--sd-motion-duration-fast`
shape.radius-control	…	`--sd-shape-radius-control`
shape.radius-surface	…	`--sd-shape-radius-surface`
spacing.gap.xs	…	`--sd-spacing-gap-xs`
spacing.inset.lg	…	`--sd-spacing-inset-lg`
spacing.inset.sm	…	`--sd-spacing-inset-sm`
spacing.stack.sm	…	`--sd-spacing-stack-sm`
spacing.stack.xs	…	`--sd-spacing-stack-xs`
target.min	…	`--sd-target-min`

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/chart-container

Then import it

import { ChartContainer } from "@/components/ui/chart-container"

Props

ChartContainer props
Prop	Type	What it does
`title`required	`string`	Visible title of the chart (names the figure).
`summary`required	`string`	One sentence that states the main finding in words ("Signups doubled in March").
`children`required	`ReactNode`	The chart itself (any library, or an SVG). It is hidden from screen readers; the table carries the data.
`table`required	`ReactNode`	The same data as a table (required). Use Table. Opened with the Show data table button.
`defaultShowTable`	`boolean`Default `false`	Start with the data table shown. Default false.
`className`	`string`

When to use it

Use it for

Every chart, from any library

Use something else for

A single number: use Stat
Data people need to scan exactly: show the Table first

Screen readers announce "Signups by month, figure"; "Show data table, button, collapsed".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

Write the summary as the main finding
Label series directly or with patterns as well as colour

Shared patterns it ships with: 1.4.1 (summary, direct labels and the table, not colour alone); 1.1.1 (table fallback).

This release’s test results

Test results for ChartContainer in this release
axe-core (WCAG A, AA, AAA and best practice)	60 runs across every story, theme, density and width: 0 violations
Rendered text contrast	460 text runs: 0 below 7:1, lowest 8.42:1
Target size	14 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)	18 focus stops in 3 browser engines: all pass
Keyboard script	Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

ChartContainer keyboard steps
Key	What happens
`Tab`	Tab reaches the data table toggle
`Enter`	Enter shows the table
`Space`	Space hides it again

In Figma

The Figma component is ChartContainer. The Figma library isn’t published yet.

Figma to code: Title → title; Summary → summary; Chart → children; Table shown → defaultShowTable; nested Table → table.