Design system · Component review 20

Benchmark chart group

A chart title should explain what the bars measure without competing with the data. The original Guide chart and its full figure caption remain useful; this review concerns the optional shared heading around a chart.

Adopted shared style: BenchmarkChartGroup now uses the refined metric heading. The published Guide keeps its original chart and figure caption.

Chart treatments

Each treatment uses the same illustrative data, including a zero value. The bars themselves are the existing Guide component.

01

Original Guide

Chart beneath the document heading

Compressed CSS

Fixture A
18.4 kB10 samples
Fixture B
28.6 kB10 samples
Fixture C
0 kBno recorded output

The original benchmark page gives the chart its context in the document heading and figure caption. The bars, values, and colors already work well.

02

Previous shared

Compact chart group heading

Compressed CSS

Brotli · 10 samples
Fixture A
18.4 kB10 samples
Fixture B
28.6 kB10 samples
Fixture C
0 kBno recorded output

The previous shared wrapper introduced a small in-chart title and a secondary detail across a fine rule.

03

Adopted

Clear metric hierarchy and context

Metric

Compressed CSS

Brotli · 10 samples · kB
Fixture A
18.4 kB10 samples
Fixture B
28.6 kB10 samples
Fixture C
0 kBno recorded output

The adopted shared style strengthens the metric name, keeps unit and sample context in one quiet line, and adds breathing room above the unchanged bars.

Actual Guide use

The real `docs` fixture chart uses committed measurements and keeps its explanation in the document.

Open /guide/benchmarks
Master CSS1.4x smaller
1.8 kB
Tailwind CSS
2.6 kB

This original chart is not converted into a group by the review. Its nearby figure caption, sources and limitations stay in the Guide.