COMPONENTS

Charts

The dashboard’s existing line/area and doughnut charts now share a reusable figure class and stylesheet. No additional chart types or duplicate dashboard charts.

Usage

Markup: figure.chart > svg, figcaption

Behaviour: Existing line/area and doughnut patterns; no new chart types.

  • Use figure.chart with a direct SVG and figcaption. Supply a viewBox, role=img and unique title/desc IDs connected with aria-labelledby. Provide exact data in visible HTML or a linked table.
  • Direct polyline is the line, polygon is the area, circles without pathLength are points; g > line draws the grid and SVG text supplies labels. Coordinates and scales are calculated by your backend, not by CSS.
  • Doughnut segments are circles with pathLength=100. The backend supplies stroke-dasharray and stroke-dashoffset. --re-chart-color selects each segment colour; --re-chart-ring-width controls the stroke (22 by default). SVG rotates segments around the viewBox centre.
  • Always identify series and values in text. Forced colours and print can remove colour distinctions; descriptions and tables preserve meaning. No automatic legends, tooltips or data fetching.
  • The full/components/scoped builds include chart presentation. Modular consumers can load reva.charts.css with tokens and base. Existing chart geometry is reused; no new chart types are introduced.

Component API and styling module · Inherited appearance settings

Existing revenue chart

The same line/area chart already used by the dashboard, now without demo-only chart classes.

Monthly revenue, April to September 2026Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. April 28,400; May 32,100; June 29,700; July 36,800; August 39,200; September 42,500 euros.10k20k30k40kAprMayJunJulAugSep
Six months of recognised revenue.
HTMLSelect text to copy
<figure class="chart"><svg viewBox="0 0 540 210" role="img" aria-labelledby="revenue-svg-title revenue-svg-desc"><title id="revenue-svg-title">Monthly revenue, April to September 2026</title><desc id="revenue-svg-desc">Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. April 28,400; May 32,100; June 29,700; July 36,800; August 39,200; September 42,500 euros.</desc><g><line x1="50" x2="500" y1="150" y2="150"></line><text x="0" y="154">10k</text></g><g><line x1="50" x2="500" y1="110" y2="110"></line><text x="0" y="114">20k</text></g><g><line x1="50" x2="500" y1="70" y2="70"></line><text x="0" y="74">30k</text></g><g><line x1="50" x2="500" y1="30" y2="30"></line><text x="0" y="34">40k</text></g><polygon points="50,190 50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20 500,190"></polygon><polyline points="50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20"></polyline><circle cx="50" cy="76.4" r="4"></circle><circle cx="140" cy="61.599999999999994" r="4"></circle><circle cx="230" cy="71.2" r="4"></circle><circle cx="320" cy="42.80000000000001" r="4"></circle><circle cx="410" cy="33.19999999999999" r="4"></circle><circle cx="500" cy="20" r="4"></circle><text x="50" y="208" text-anchor="middle">Apr</text><text x="140" y="208" text-anchor="middle">May</text><text x="230" y="208" text-anchor="middle">Jun</text><text x="320" y="208" text-anchor="middle">Jul</text><text x="410" y="208" text-anchor="middle">Aug</text><text x="500" y="208" text-anchor="middle">Sep</text></svg><figcaption>Six months of recognised revenue.</figcaption></figure>

Existing channel chart

The same doughnut chart already used by the dashboard, with all shares in its accessible description.

Revenue share by channelDirect 55 percent, partners 30 percent, referrals 15 percent.€42.5kTOTAL REVENUE
Share of September revenue
HTMLSelect text to copy
<figure class="chart"><svg viewBox="0 0 160 160" role="img" aria-labelledby="channels-svg-title channels-svg-desc"><title id="channels-svg-title">Revenue share by channel</title><desc id="channels-svg-desc">Direct 55 percent, partners 30 percent, referrals 15 percent.</desc><circle style="--re-chart-color: var(--re-primary)" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="55 45" stroke-dashoffset="0"></circle><circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 55%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="30 70" stroke-dashoffset="-55"></circle><circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 25%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="15 85" stroke-dashoffset="-85"></circle><text x="80" y="77" text-anchor="middle" style="font-size:19px">€42.5k</text><text x="80" y="96" text-anchor="middle" style="font-size:7px;letter-spacing:.6px">TOTAL REVENUE</text></svg><figcaption>Share of September revenue</figcaption></figure>