DataChart

SVG line, bar, and area charts with legends and point tooltips.

Overview

  • Use charts to compare trends or values. Keep important values available as text.

Aliases

chart, graph

When to use

  • Use DataChart for compact product analytics, trend summaries, or operational dashboards.
  • Use the tooltip and legend together when multiple series share the same canvas.

When not to use

  • Do not use DataChart for stacked, zoomable, or exploration-heavy analysis.
  • Do not use it when a table communicates the values more clearly.

Structural parts

chart canvas shell

surface

Owns the chart background, border, and internal spacing.

category labels and grid

axis

Supports interpretation of the plotted values.

series explanation

legend

Maps color to each series label.

point detail

tooltip

Shows focused or hovered value details.

Public interface

Props
NameTypeDefaultDescription
type'line' | 'bar' | 'area'—Chart rendering mode.
seriesArray<{ id: string; label: string; values: number[]; tone?: "brand" | "success" | "warning" | "danger" | "neutral" }>—Series values to plot.
categoriesstring[]—Category labels aligned with each value index.
titlestring—Chart title.
descriptionstring—Optional supporting description.
heightnumber280SVG height in pixels.
showLegendbooleantrueShows the series legend.
showGridbooleantrueShows horizontal grid lines.
showTooltipbooleantrueShows tooltip details on focus or pointer interaction.
valueFormat(value: number) => string—Optional formatter for displayed values.
emptyTitlestring'No data'Title shown when no chart data is available.
emptyDescriptionstring''Optional empty-state guidance.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultDataChart is prop-driven and does not expose custom series or tooltip slots.

Variants, sizes, and states

Variants

  • line: Trend-focused path chart
  • bar: Comparative column chart
  • area: Filled trend chart

Sizes

  • default: DataChart uses an explicit height prop rather than recipe sizes.

States

  • rest: Chart rendered without an active point
  • tooltip: One point or bar is active for focused reading

Accessibility

Semantics

  • Uses figure and SVG semantics for the chart surface and associated description.

Keyboard

  • Focused points or bars can reveal the same tooltip details as hover.

Screen readers

  • Describe the trend in text and keep important values available without interpreting the chart.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-chart-gap
0.75rem

surface

--dk-chart-surface-bg
#f2f5fb
--dk-chart-surface-fg
#16181c
--dk-chart-surface-border
#95989d
--dk-chart-surface-radius
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
--dk-chart-surface-padding
1rem
--dk-chart-grid
#95989d
--dk-chart-axis
#16181c
--dk-chart-brand
#2072e4
--dk-chart-success
#279936
--dk-chart-warning
#dca400
--dk-chart-danger
#cc272e
--dk-chart-neutral
#95989d

title

--dk-chart-title-size
1rem
--dk-chart-title-weight
650

description

--dk-chart-description-size
0.875rem

axis

--dk-chart-axis-size
0.75rem

legend

--dk-chart-legend-size
0.8rem

tooltip

--dk-chart-tooltip-bg
#f2f5fb
--dk-chart-tooltip-fg
#16181c
--dk-chart-tooltip-border
#95989d
--dk-chart-tooltip-radius
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

empty

--dk-chart-empty-size
0.9rem

Implementation notes

  • DataChart supports line, bar, and area series. It does not support stacking or zooming.

Examples

Starter

Line trend

A trend chart for comparable series.

<DataChart type="line" title="Revenue" categories={['Jan', 'Feb', 'Mar']} series={[{ id: 'mrr', label: 'MRR', values: [12, 18, 24] }]} />

Common patterns

Comparative bar chart

Bar mode works well for side-by-side category comparisons.

<DataChart type="bar" title="Activation" categories={['Week 1', 'Week 2', 'Week 3']} series={activationSeries} />

Edge cases

Filled trend with hidden legend

Use area mode to show a trend for one metric.

<DataChart type="area" title="Active users" showLegend={false} categories={['Mon', 'Tue', 'Wed']} series={activeUserSeries} />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

line

pass

type=line

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: surface · single-line 0 px single-line estimate; 0 px minimum width
    320 px: pass 640 px: pass

bar

pass

type=bar

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: surface · single-line 0 px single-line estimate; 0 px minimum width
    320 px: pass 640 px: pass

area

pass

type=area

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: surface · single-line 0 px single-line estimate; 0 px minimum width
    320 px: pass 640 px: pass