Chart group

A chart group

Complete chart presentation

Illustrative component data. Follow the product link for measured benchmark results.

Used on the benchmarks.

Usage and interface

Use BenchmarkBars for values on a shared scale and BenchmarkStackedBars for composition within each row. Pass the same max to a stacked chart when its row totals also need a shared scale, as in the delivery payload comparison. The examples below use illustrative data, not measured results. See Benchmarks for real fixtures, sources, and limits.

BenchmarkChartGroup pairs a clearer metric heading with its unit and sample context, while leaving the established bars intact. The chart group review shows the current chart heading. BenchmarkMetrics renders a refined definition list for short summaries, with tabular values and a detail line that stacks in narrow columns; its metrics review shows the current metric rows. BenchmarkDataTable uses a refined native disclosure and a named, keyboard-focusable scroll region, so long tables retain complete rows and columns; its data table review shows the current disclosure. BenchmarkSource marks a committed snapshot beside its recorded date; the source review shows the current evidence footer. BenchmarkFigure, BenchmarkDelta, and BenchmarkSampleSummary provide captions, contextual deltas, and sample statistics.

Keep series labels visible, include units and sample counts, and distinguish zero from missing data. Labels wrap; values use tabular numerals. A zero value has no colored fill. Stacked rows normalize to their own totals, so their lengths do not compare absolute payload size. Put important findings and limitations in the document body as well as the chart caption.

import BenchmarkChartGroup from '@master/internal-site/benchmarks/BenchmarkChartGroup.astro'import BenchmarkDataTable from '@master/internal-site/benchmarks/BenchmarkDataTable.astro'import BenchmarkSource from '@master/internal-site/benchmarks/BenchmarkSource.astro'<BenchmarkChartGroup title="Style recalculation" detail="Median · 3 samples" unit="ms"  items={[{ id: 'fixture-a', label: 'Fixture A', value: 12.5, color: 'blue' }]} /><BenchmarkDataTable title="All recorded measurements">  <table>    <thead><tr><th scope="col">Fixture</th><th scope="col">Median</th></tr></thead>    <tbody><tr><th scope="row">Fixture A</th><td>12.5 ms</td></tr></tbody>  </table></BenchmarkDataTable><BenchmarkSource generatedAt="2026-07-01T00:00:00Z" href="https://rc.css.master.co/benchmarks#data-sources" />

Charts and summaries render on the server and do not animate or change measurements. The table adds a small keyboard handler for consistent arrow-key scrolling, including mobile WebKit; disclosure remains native. Use nonnegative finite values with one unit per chart; use delta labels for signed changes. A max smaller than an item clips the visual scale and should be avoided. Tables may scroll horizontally inside their own region, never the document.

#Complete chart patterns