Statistical charts

Scatter plots, distributions from histogram to box plot, radar profiles and treemaps for data with many points.

4 components · 20 variants

Switch category

Distribution chart

How values spread, not only their average. As a histogram, box plots, density curves, a dot strip where no dot hides another, or percentile bands with your own value placed in them.

Histogram
Box plot
Density
Dot strip
Percentiles

Props and details

Histogram

Counts per bin on round edges. The middle half of the values keeps the accent, the median stands as a line.

Open in Studio

Installv1.0.0

aiw add @ai-website/distribution-chart

Brings along utils, kit, chart, chart-figure

Usage

<DistributionChart variant="histogram" values={hours} unitLabel="Hours to delivery" />

Source

Box plot

One box per group, with quartiles, median, whiskers at one and a half box lengths and outliers as rings.

Open in Studio

Installv1.0.0

aiw add @ai-website/distribution-chart

Brings along utils, kit, chart, chart-figure

Usage

<DistributionChart variant="box-plot" groups={[{ label: "Monday", values: [6.1, 4.8, …] }]} unitLabel="Minutes" />

Source

Density

Smooth curves for up to three groups on one scale, the median dashed. The pointer reads how many are faster than a point.

Open in Studio

Installv1.0.0

aiw add @ai-website/distribution-chart

Brings along utils, kit, chart, chart-figure

Usage

<DistributionChart variant="density" groups={[{ label: "Phone", values }, { label: "Desktop", values }]} unitLabel="Seconds" />

Source

Dot strip

Every value as a dot, packed so none hides another, the median as a line through each group.

Open in Studio

Installv1.0.0

aiw add @ai-website/distribution-chart

Brings along utils, kit, chart, chart-figure

Usage

<DistributionChart variant="strip" groups={[{ label: "Lunch", values }, { label: "Dinner", values }]} />

Source

Percentiles

One spread as bands from P10 to P90 with the median, your own value placed in it and a sentence that says where it stands.

Open in Studio

Installv1.0.0

aiw add @ai-website/distribution-chart

Brings along utils, kit, chart, chart-figure

Usage

<DistributionChart variant="percentiles" values={allSites} marker={{ value: 1.4, label: "Your site" }} lowerIsBetter />

Source

radar-chart

Radar chart

Several measures of one thing on spokes around a center, as one profile, a comparison, a linked list, small multiples on one scale or against a target. Arrow keys walk around the spokes.

Profile
Compare
With list
Small multiples
Against a target

Props and details

Profile

One shape on rings from zero, every spoke answers the pointer with its value.

Open in Studio

Installv1.0.0

aiw add @ai-website/radar-chart

Brings along utils, kit, chart, chart-figure

Usage

<RadarChart variant="profile" axes={[…]} series={[{ label: "Guests", values: [9.1, …] }]} max={10} />

Source

Compare

Two shapes on one web. A key in the legend brings its shape forward, the tooltip lists both values per spoke.

Open in Studio

Installv1.0.0

aiw add @ai-website/radar-chart

Brings along utils, kit, chart, chart-figure

Usage

<RadarChart variant="compare" axes={[…]} series={[{ label: "Trail 4", values }, { label: "Road 2", values }]} max={10} />

Source

With list

The shape and a list of the spokes with bars side by side, stacked on phones. Pointing at either lights up the same spoke.

Open in Studio

Installv1.0.0

aiw add @ai-website/radar-chart

Brings along utils, kit, chart, chart-figure

Usage

<RadarChart variant="with-list" axes={[…]} series={[{ label: "Score", values }]} max={100} />

Source

Small multiples

One small web per item on the same scale, a key with the spoke names in front, the average next to each name.

Open in Studio

Installv1.0.0

aiw add @ai-website/radar-chart

Brings along utils, kit, chart, chart-figure

Usage

<RadarChart variant="multiples" axes={[…]} series={[{ label: "Old Town", values }, …]} max={10} />

Source

Against a target

The shape against a dashed target outline. Spokes below the target get a hollow dot, the count stands above.

Open in Studio

Installv1.0.0

aiw add @ai-website/radar-chart

Brings along utils, kit, chart, chart-figure

Usage

<RadarChart variant="target" axes={[…]} series={[{ label: "Today", values }]} target={[…]} targetLabel="Goal 2027" />

Source

scatter-chart

Scatter chart

Two measures per item as dots, plain, in groups, with a trend line, in four fields or as bubbles. The nearest dot answers the pointer, arrow keys step from left to right.

Dots
Groups
Trend line
Four fields
Bubbles

Props and details

Dots

One set of dots, the hottest and the coldest day named directly, the rest in tooltip and table.

Open in Studio

Installv1.0.0

aiw add @ai-website/scatter-chart

Brings along utils, kit, chart, chart-figure

Usage

<ScatterChart variant="dots" data={[{ label, x, y }]} xLabel="Temperature" yLabel="Scoops" highlight={["Sep 6"]} />

Source

Groups

Three districts in the first three slot colors. A key in the legend brings its district forward.

Open in Studio

Installv1.0.0

aiw add @ai-website/scatter-chart

Brings along utils, kit, chart, chart-figure

Usage

<ScatterChart variant="groups" data={[{ label, x, y, group }]} groups={["Old Town", "Harbour", "North"]} />

Source

Trend line

A least squares line draws in after the dots and names how strong the relation is.

Open in Studio

Installv1.0.0

aiw add @ai-website/scatter-chart

Brings along utils, kit, chart, chart-figure

Usage

<ScatterChart variant="trend" data={[{ label, x, y }]} xLabel="Practice hours" yLabel="Errors" />

Source

Four fields

Split at the averages into four named fields. Picking a field tints it and brings its products forward.

Open in Studio

Installv1.0.0

aiw add @ai-website/scatter-chart

Brings along utils, kit, chart, chart-figure

Usage

<ScatterChart variant="quadrant" data={[…]} fields={["Volume drivers", "Stars", "Review", "Niche"]} />

Source

Bubbles

A third measure as the true area of each dot, the largest drawn first, a size key in the corner.

Open in Studio

Installv1.0.0

aiw add @ai-website/scatter-chart

Brings along utils, kit, chart, chart-figure

Usage

<ScatterChart variant="bubble" data={[{ label, x, y, size }]} sizeLabel="Revenue per month" />

Source

treemap

Treemap

Part to whole as tiles whose area is the value, flat, in groups, with drill down, tinted by change or across two periods with gliding tiles. Arrow keys move between tiles.

Squarified
Grouped
Drill down
Tinted by change
Two periods

Props and details

Squarified

One level of tiles close to square, the largest in the accent, labels only where they fit.

Open in Studio

Installv1.0.0

aiw add @ai-website/treemap

Brings along utils, kit, icon, chart, chart-figure

Usage

<Treemap variant="squarified" items={[{ label: "Jackets", value: 182400 }, …]} format={{ style: "currency", currency: "EUR" }} />

Source

Grouped

Tiles inside four named groups with their totals, each group in its own tone, the legend carries the sums.

Open in Studio

Installv1.0.0

aiw add @ai-website/treemap

Brings along utils, kit, icon, chart, chart-figure

Usage

<Treemap variant="grouped" items={[{ label: "Education", value: 0, children: [{ label: "Schools", value: 41.2 }] }]} />

Source

Drill down

The groups first. A tap opens one and its tiles glide in, the trail above and Escape lead back.

Open in Studio

Installv1.0.0

aiw add @ai-website/treemap

Brings along utils, kit, icon, chart, chart-figure

Usage

<Treemap variant="drilldown" items={[{ label: "Photos", value: 0, children: [{ label: "2026", value: 48.2 }] }]} />

Source

Tinted by change

Area is the size, the tint is the change against the last month. Arrows and signs carry the direction too, not the color alone.

Open in Studio

Installv1.0.0

aiw add @ai-website/treemap

Brings along utils, kit, icon, chart, chart-figure

Usage

<Treemap variant="change" items={[{ label: "Search", value: 18420, change: 0.124 }, …]} />

Source

Two periods

A switch between two years. The tiles keep their order and glide to their new size, the readout names both values.

Open in Studio

Installv1.0.0

aiw add @ai-website/treemap

Brings along utils, kit, icon, chart, chart-figure

Usage

<Treemap variant="compare" periods={["2026", "2025"]} items={[{ label: "Rent", value: 38400, previous: 36000 }, …]} />

Source

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Statistical charts on a page.

On this page

Histogram

Box plot

Density

Dot strip

Percentiles

Profile

Compare

With list

Small multiples

Against a target

Dots

Groups

Trend line

Four fields

Bubbles

Squarified

Grouped

Drill down

Tinted by change

Two periods

Similar components, Often combined with

Similar components

Often combined with