Chart

A picture of numbers: comparison, trend, share or spread.

Left out of Multi-brand Multi-brand draws on core, content and media families, not data. It admits only families in its roles. Its scenarios are signing up and managing a plan. Use instead: Card, Badge

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Chart in StorybookSee it in dark

When to use it

• Use it when: The story is a relationship in a set of numbers, not a single number.
• Not when: A table is clearer, the set is too small, or the chart is decoration.

Instead:

• Table: The numbers as rows; often needed beside the chart.

How Multi-brand uses it

A number in a table

Use type.body

Not A mono font

Prices sit in sentences and offers, not in columns to compare, so a mono font adds nothing in any brand.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

See Voice and tone for the whole voice.

Accessibility and keyboard

Test before you ship:

• The same numbers are available as a table or text; color is not the only key. undefined

Use it in code

npx open-ds add chart

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Chart reads 18 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Chart's tokens to change Chart alone.

Changes with theme

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Chart
Text size	component.chart.font-sizetype.caption.font-sizevar(--chart-font-size)	font.size.13:0.8125rem
Icon Changes with theme	component.chart.iconcolor.text.mutedvar(--chart-icon)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
Icon 2 Changes with theme	component.chart.icon-2color.border.defaultvar(--chart-icon-2)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Icon 3 Changes with theme	component.chart.icon-3color.surface.sunkenvar(--chart-icon-3)	Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B
Weight	component.chart.font-weighttype.label.font-weightvar(--chart-font-weight)	font.weight.600:600
Gap	component.chart.gapcomponent-spacing-map.x2var(--chart-gap)	space.8:0.5rem
Corner Changes with theme	component.chart.radiusradius.containervar(--chart-radius)	Aster Lightradius.8:0.5remAster Darkradius.8:0.5remBirch Lightradius.16:1remBirch Darkradius.16:1remCoral Lightradius.20:1.25remCoral Darkradius.20:1.25rem
Border Changes with theme	component.chart.bordercolor.border.defaultvar(--chart-border)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Fill Changes with theme	component.chart.backgroundcolor.surface.canvasvar(--chart-background)	Aster Lightslate-deep.light.50:#F8FAFCAster Darkslate-deep.dark.0:#020617Birch Lightslate-deep.light.50:#F8FAFCBirch Darkslate-deep.dark.0:#020617Coral Lightslate-deep.light.50:#F8FAFCCoral Darkslate-deep.dark.0:#020617
Padding, left and right	component.chart.padding-xcomponent-spacing-map.x3var(--chart-padding-x)	space.20:1.25rem
Padding, top and bottom	component.chart.padding-ycomponent-spacing-map.x2var(--chart-padding-y)	space.8:0.5rem
Shadow Changes with theme	component.chart.shadowelevation.overlayvar(--chart-shadow)	Aster Lightshadow.overlayAster Darkshadow.overlay-darkBirch Lightshadow.overlayBirch Darkshadow.overlay-darkCoral Lightshadow.overlayCoral Darkshadow.overlay-dark
Gap 2	component.chart.gap-2space.gap.defaultvar(--chart-gap-2)	space.12:0.75rem
Text Changes with theme	component.chart.labelcolor.text.mutedvar(--chart-label)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
Label 2 Changes with theme	component.chart.label-2color.text.primaryvar(--chart-label-2)	Aster Lightslate-deep.light.900:#0F172AAster Darkslate-deep.dark.900:#F8FAFCBirch Lightslate-deep.light.900:#0F172ABirch Darkslate-deep.dark.900:#F8FAFCCoral Lightslate-deep.light.900:#0F172ACoral Darkslate-deep.dark.900:#F8FAFC
Gap 3	component.chart.gap-3space.gap.groupvar(--chart-gap-3)	space.24:1.5rem
Padding, bottom	component.chart.padding-bottomcomponent-spacing-map.x3var(--chart-padding-bottom)	space.20:1.25rem
Padding, top	component.chart.padding-topcomponent-spacing-map.x3var(--chart-padding-top)	space.20:1.25rem
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Aster Lightslate-deep.light.200 · #E2E8F0Aster Darkslate-deep.dark.100 · #1E293BBirch Lightslate-deep.light.200 · #E2E8F0Birch Darkslate-deep.dark.100 · #1E293BCoral Lightslate-deep.light.200 · #E2E8F0Coral Darkslate-deep.dark.100 · #1E293B