demo · v141

Chart Composition

Dashboards typically composite many SVG sub-charts inside a wrapper SVG (D3 + Vue, Observable Plot, custom React renderers). Each sub-chart wants to declare its own sizing in markup. Pre-141, the sub-chart's width/height attributes were ignored and you had to push every sub-chart through CSS variables — leaky, slow, and a maintenance nightmare.

checking support…

Three sub-charts, each sized via its own <svg width="…" height="…"> attribute — no per-chart CSS:

Dashboard conversions cohort split latency p95

the markup

<svg viewBox="0 0 720 200">
  <!-- composition root -->
  <svg x="20" y="40" viewBox="0 0 160 140" width="160" height="140">
    <!-- bar chart, sized in markup -->
  </svg>
  <svg x="220" y="40" viewBox="0 0 160 140" width="160" height="140">
    <!-- donut, sized in markup -->
  </svg>
  <!-- etc — each sub-chart is self-contained -->
</svg>

why this angle

The chromestatus note emphasises "developers gain more control over sizing of nested SVG elements" — the chart-composition pattern is the canonical place that matters. Charting frameworks generate big SVG strings server-side or in workers; threading CSS through to size each generated sub-chart is brittle and slow. Honouring the attributes restores SVG's promise of self-contained, sizable graphics — important for static dashboards, reports, exports to PDF, anywhere CSS isn't reliably available.

see also

scenario focus

Select a scenario to focus its rendered example and summary.