Skip to content
STYLESCAPE

Chart

Examples for the ss-c-chart module: the frame around a chart library's canvas or SVG, with title, plot body, attached legend and caption. The library draws inside __body; the frame only sizes it. Give the drawing a text alternative (role="img" + aria-label, or a data table).

Default (md) with legend

Energy use per quarter

MWh, 2026

  • Consumption
  • Target
Source: building management system, metered hourly.
HTML 
<figure class="ss-c-chart" aria-labelledby="chart-energy-title">
            <div class="ss-c-chart__header">
                <h3 class="ss-c-chart__title" id="chart-energy-title">Energy use per quarter</h3>
                <p class="ss-c-chart__subtitle">MWh, 2026</p>
            </div>
            <div class="ss-c-chart__body">
                <svg viewBox="0 0 400 200" preserveAspectRatio="none" role="img" aria-label="Bar chart: Q1 120, Q2 90, Q3 70, Q4 140 MWh; target 100 MWh">
                    <rect x="30" y="80" width="60" height="120" style="fill: var(--ss-color-accent)"/>
                    <rect x="125" y="110" width="60" height="90" style="fill: var(--ss-color-accent)"/>
                    <rect x="220" y="130" width="60" height="70" style="fill: var(--ss-color-accent)"/>
                    <rect x="315" y="60" width="60" height="140" style="fill: var(--ss-color-accent)"/>
                    <line x1="0" x2="400" y1="100" y2="100" stroke-dasharray="6 4" stroke-width="2" style="stroke: var(--ss-color-warning)"/>
                </svg>
            </div>
            <ul class="ss-c-legend ss-c-chart__legend" aria-label="Legend">
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch" style="--ss-legend-color: var(--ss-color-accent)" aria-hidden="true"></span>Consumption</li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--dashed" style="--ss-legend-color: var(--ss-color-warning)" aria-hidden="true"></span>Target</li>
            </ul>
            <figcaption class="ss-c-chart__caption">Source: building management system, metered hourly.</figcaption>
        </figure>

Sizes

--xs
--sm
--lg
HTML 
<div class="ss-c-chart-grid">
            <figure class="ss-c-chart ss-c-chart--xs" aria-label="Extra small chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">--xs</figcaption></figure>
            <figure class="ss-c-chart ss-c-chart--sm" aria-label="Small chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">--sm</figcaption></figure>
            <figure class="ss-c-chart ss-c-chart--lg" aria-label="Large chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">--lg</figcaption></figure>
        </div>

Legend beside, aspect ratio

Modal split

  • Cycling45%
  • Public transport30%
  • Car25%
HTML 
<figure class="ss-c-chart ss-c-chart--legend-end ss-c-chart--aspect" style="--ss-chart-aspect: 2 / 1" aria-labelledby="chart-share-title">
            <div class="ss-c-chart__header"><h3 class="ss-c-chart__title" id="chart-share-title">Modal split</h3></div>
            <div class="ss-c-chart__body">
                <svg viewBox="0 0 200 100" role="img" aria-label="Donut chart: cycling 45%, public transport 30%, car 25%">
                    <circle cx="100" cy="50" r="35" fill="none" stroke-width="18" pathLength="100" stroke-dasharray="45 55" style="stroke: var(--ss-color-success)" transform="rotate(-90 100 50)"/>
                    <circle cx="100" cy="50" r="35" fill="none" stroke-width="18" pathLength="100" stroke-dasharray="30 70" stroke-dashoffset="-45" style="stroke: var(--ss-color-info)" transform="rotate(-90 100 50)"/>
                    <circle cx="100" cy="50" r="35" fill="none" stroke-width="18" pathLength="100" stroke-dasharray="25 75" stroke-dashoffset="-75" style="stroke: var(--ss-color-muted)" transform="rotate(-90 100 50)"/>
                </svg>
            </div>
            <ul class="ss-c-legend ss-c-chart__legend" aria-label="Legend">
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--point" style="--ss-legend-color: var(--ss-color-success)" aria-hidden="true"></span>Cycling<span class="ss-c-legend__value">45%</span></li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--point" style="--ss-legend-color: var(--ss-color-info)" aria-hidden="true"></span>Public transport<span class="ss-c-legend__value">30%</span></li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--point" style="--ss-legend-color: var(--ss-color-muted)" aria-hidden="true"></span>Car<span class="ss-c-legend__value">25%</span></li>
            </ul>
        </figure>

Dashboard grid: wide and full

--wide (two tracks)
default
--full (every track)
HTML 
<div class="ss-c-chart-grid">
            <figure class="ss-c-chart ss-c-chart--sm ss-c-chart--wide" aria-label="Wide chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">--wide (two tracks)</figcaption></figure>
            <figure class="ss-c-chart ss-c-chart--sm" aria-label="Chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">default</figcaption></figure>
            <figure class="ss-c-chart ss-c-chart--xs ss-c-chart--full" aria-label="Full-width chart frame"><div class="ss-c-chart__body" style="background: var(--ss-color-surface-muted)"></div><figcaption class="ss-c-chart__caption">--full (every track)</figcaption></figure>
        </div>