Charts

When to use it

Use these for the charts an application actually needs: a bar per month, a donut of three segments, a sparkline in a table cell. They are markup you render on the server, which means no client-side data layer, no library to load, and a chart that appears with the page rather than after it.

For interactive analysis — zooming, brushing, tooltips on a thousand points, axes computed from data — use a real charting library. That is a different job, and Deck does not pretend to do it.

--value is the whole idea

A column's height is calc(var(--value) * 1%). A bar's width is the same on the inline axis. A donut segment and a heatmap cell read the same property. So rendering a chart is writing numbers into style attributes, which any template language does:

<div class="chart-col" style="--value:68" data-label="Mar" data-value="68"></div>

data-label and data-value are drawn as ::after and ::before content, so the axis label and the value on top of the bar come from attributes rather than from extra elements.

<figure class="chart">
  <figcaption class="chart-head">
    <span class="chart-title">Exports per month</span>
    <span class="chart-note">2026</span>
  </figcaption>
  <div class="chart-columns">
    <div class="chart-col" style="--value:42" data-label="Jan" data-value="42"></div>
    <div class="chart-col" style="--value:58" data-label="Feb" data-value="58"></div>
    <div class="chart-col" style="--value:68" data-label="Mar" data-value="68"></div>
    <div class="chart-col" style="--value:51" data-label="Apr" data-value="51"></div>
    <div class="chart-col" style="--value:74" data-label="May" data-value="74"></div>
    <div class="chart-col" style="--value:63" data-label="Jun" data-value="63"></div>
  </div>
</figure>

The palette

.chart declares six series colours as custom properties, and five of them are computed from the brand hue:

--c1: var(--brand-500);
--c2: oklch(64% .13 calc(var(--hue-brand) + 48));
--c3: oklch(70% .14 calc(var(--hue-brand) + 96));
--c4: oklch(62% .13 calc(var(--hue-brand) - 52));
--c5: oklch(74% .12 calc(var(--hue-brand) + 148));
--c6: oklch(56% .10 calc(var(--hue-brand) + 200));

Rotating the hue and holding lightness and chroma roughly steady is what makes six colours that are distinguishable from each other and obviously related. Change --hue-brand and the whole palette rotates with it — the charts stay in the same family as the buttons.

.s1 through .s6 set --series to one of them, and .s-good, .s-warn, .s-bad and .s-muted set it to a status colour. Put the class on a mark and its fill, its stroke and its legend swatch all follow.

<figure class="chart chart-sm">
  <div class="chart-legend">
    <span class="s1">Shipped</span>
    <span class="s2">Pending</span>
    <span class="s-bad">Failed</span>
  </div>
  <div class="chart-columns">
    <div class="chart-col s1" style="--value:72" data-label="Jan"></div>
    <div class="chart-col s2" style="--value:48" data-label="Feb"></div>
    <div class="chart-col s-bad" style="--value:22" data-label="Mar"></div>
  </div>
</figure>

Text on a series colour

A value printed inside a bar has to be readable against whatever colour that series is, and the series colours are chosen for discriminability rather than for contrast. Where the browser supports it, Deck uses contrast-color():

@supports (color: contrast-color(red)) {
  .chart-col, .chart-bar-fill, .chart-meter > span {
    color: contrast-color(var(--series, var(--c1)));
  }
}

The source comment is unusually candid about the limits, and it is worth repeating: some series colours sit in the 55–65% lightness band where neither black nor white clears AA comfortably, so this raises the floor rather than guaranteeing it. If a value must be readable, put it outside the bar with .chart-bar-value rather than on top of it.

The chart types

<figure class="chart">
  <div class="chart-bars">
    <div class="chart-bar">
      <span class="chart-bar-label">Chrome</span>
      <span class="chart-bar-track"><span class="chart-bar-fill s1" style="--value:64"></span></span>
      <span class="chart-bar-value">64%</span>
    </div>
    <div class="chart-bar">
      <span class="chart-bar-label">Safari</span>
      <span class="chart-bar-track"><span class="chart-bar-fill s2" style="--value:21"></span></span>
      <span class="chart-bar-value">21%</span>
    </div>
    <div class="chart-bar">
      <span class="chart-bar-label">Firefox</span>
      <span class="chart-bar-track"><span class="chart-bar-fill s3" style="--value:9"></span></span>
      <span class="chart-bar-value">9%</span>
    </div>
  </div>
</figure>

<div class="donut-wrap">
  <div class="donut" style="--value:68" role="img" aria-label="68 per cent of quota used">
    <div class="donut-center">
      <span class="donut-value">68%</span>
      <span class="donut-label">of quota</span>
    </div>
  </div>
</div>

<div class="chart-heat" style="--cols:7;max-inline-size:16rem">
  <span style="--value:10"></span><span style="--value:35"></span><span style="--value:80"></span>
  <span style="--value:55"></span><span style="--value:5"></span><span style="--value:95"></span>
  <span style="--value:45"></span><span style="--value:70"></span><span style="--value:20"></span>
  <span style="--value:60"></span><span style="--value:88"></span><span style="--value:30"></span>
  <span style="--value:15"></span><span style="--value:50"></span>
</div>

Classes

Generated from src/14-charts.css by tools/docs/extract.mjs.

Tokens

The six series colours and --chart-h are local to .chart rather than global tokens, because they are a chart's palette rather than the application's. --hue-brand is what they are all computed from.

Accessibility

• A chart made of <div>s is invisible. None of these classes carry semantics. A screen-reader user gets nothing at all unless you supply it — this is the single most important thing on the page.
• The best answer is usually a table. Put the figures in a <table class="sr-only"> beside the chart, or make the chart the visual layer over a real one. Then the data is available, sortable and printable, and the chart is decoration on top.
• The next best is role="img" with a summary. A donut showing one number is well served by aria-label="68 per cent of quota used", as in the example. A six-series line chart is not — no label summarises it usefully.
• Never rely on colour alone to distinguish series. Six hues at similar lightness are hard to tell apart for a reader with colour vision deficiency — and the palette is deliberately hue-rotated, which is precisely the axis that is hardest to distinguish. Label the marks directly, or use .chart-line-dashed and other pattern differences.
• Values printed inside bars may not clear AA. See above — contrast-color() improves it and does not guarantee it. .chart-bar-value outside the bar always does.
• data-label and data-value are generated content. Like every ::before text in Deck, they are not reliably announced. They are for sighted readers; the accessible version has to exist separately.
• The legend can be interactive. .chart-legend [aria-pressed="false"] fades a toggled-off series, so a legend of real <button>s gets a working state for free — with the accessible state driving the styling, as elsewhere in Deck.
• Hover-only detail is lost on touch and keyboard. .chart-col:hover brightens and .chart-dot-active marks a point; neither is reachable without a pointer.

Right to left

Bars grow from the starting edge, which means transform-origin has to be flipped for RTL — and transform-origin has no logical form. src/19-logical.css handles it in one rule shared with the toast timer and the progress fill:

[dir="rtl"] :is(.chart-bar-fill, .progress::-webkit-progress-value, .toast-timer) {
  transform-origin: right center;
}

Columns grow on the block axis and are unaffected. A donut's conic gradient does not mirror either, which is correct — a clock face reads the same way in every writing direction.

Reduced motion

Bars, columns, lines, areas and donuts all animate in when they first render. Under prefers-reduced-motion: reduce, src/14-charts.css sets animation: none on all of them explicitly rather than relying on the global reset:

.chart-col, .chart-col-stack, .chart-bar-fill, .chart-line, .chart-area, .donut { animation: none; }

That is the right treatment. The global reset shortens animations to .01ms, which for a chart that animates from zero would risk a frame showing an empty chart. Setting none means the chart is simply drawn at its final values.

Printing

Ten rules. Chart fills are in the print-color-adjust: exact list — .chart-col, .chart-col-stack > span, .chart-bar-fill, .chart-meter > span, .donut and .chart-heat > * — because a chart whose backgrounds are stripped is a set of empty rectangles.

This is one of the places print support genuinely pays: reports go to PDF, and a printed dashboard with no bars in it is worse than no dashboard.

Overriding it

/* One chart, no layer needed */
<figure class="chart" style="--chart-h:180px;--c1:var(--good-500)">

@layer app.components {
  /* A categorical palette that is not hue-rotated from the brand */
  .chart-categorical {
    --c1: #4e79a7; --c2: #f28e2b; --c3: #e15759;
    --c4: #76b7b2; --c5: #59a14f; --c6: #edc948;
  }

  /* Thicker lines */
  .chart-line { stroke-width: 3; }
}

A hue-rotated palette is coherent and hard to tell apart; a hand-picked categorical one is the opposite. If a chart has more than three series and the reader must distinguish them, the second is the better trade.

When not to use it

• Not without an accessible alternative. A table beside the chart, or role="img" with a real summary. Without one the chart does not exist for a portion of your readers.
• Not for interactive analysis. Zoom, brush, crosshairs, tooltips on a thousand points — use a charting library. These classes render a picture of data you already decided to show.
• Not for many points. One element per column means a hundred columns is a hundred elements. Past a few dozen, use SVG with a single <path>.
• Not for two numbers. A donut showing 68% is a picture of a figure that would be clearer written down. Charts earn their space by showing shape or comparison.
• Not with six series and colour as the only distinction. The palette is hue-rotated, and hue is the axis colour-blind readers lose. Label the marks directly.