Charts

TwBeeswarmChart

TwBeeswarmChart is a Blazor beeswarm chart that draws every observation as a dot, nudged sideways so none overlap.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwBeeswarmChart draws every value in a ChartSample as a dot along the value axis and moves each one sideways just far enough to clear its neighbors. The swarm widens where values cluster, so you see both the spread and how many values sit at each level.

Customer satisfaction by planScore out of 10

RAZOR

<TwChart Title="Customer satisfaction by plan" Description="Score out of 10">
    <TwBeeswarmChart Samples="@_plans" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _plans =
    [
        new("Free", [3, 4, 5, 5, 6, 6, 6, 7, 7, 7, 7, 8, 8, 9]),
        new("Team", [5, 6, 7, 7, 8, 8, 8, 8, 9, 9, 9, 10]),
        new("Enterprise", [6, 7, 8, 8, 9, 9, 9, 9, 10, 10, 10])
    ];
}

Clusters and outliers

Because no dot is hidden behind another, repeated values and stragglers are both easy to spot. Here most builds finish in about four minutes, with a handful of slow ones on the main branch.

Build duration by branchMinutes

RAZOR

<TwChart Title="Build duration by branch" Description="Minutes">
    <TwBeeswarmChart Samples="@_builds" LabelHeader="Branch" ValueFormat="0.0 min" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _builds =
    [
        new("main", [3.8, 3.9, 4.0, 4.0, 4.1, 4.1, 4.1, 4.2, 4.2, 4.3, 4.3, 4.4, 4.6, 7.9, 8.4, 11.2]),
        new("release", [4.4, 4.5, 4.6, 4.6, 4.7, 4.8, 4.8, 4.9, 5.0, 5.2]),
        new("feature", [2.9, 3.1, 3.3, 3.4, 3.6, 3.7, 3.9, 4.0, 4.4, 4.9, 5.5, 6.1])
    ];
}

Horizontal

Set Horizontal to list the groups down the side with values running left to right.

Customer satisfaction by plan

RAZOR

<TwChart Title="Customer satisfaction by plan">
    <TwBeeswarmChart Samples="@_plans" Horizontal="true" />
</TwChart>

When to use

A beeswarm suits tens of values per group. A cluster too large for its group's slot overlaps at the edges, so for hundreds of values prefer TwViolinPlotChart or TwBoxPlotChart.

Summary

Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwBeeswarmChart

Basic usage

Clusters and outliers

Horizontal

When to use

Summary

Shared features

Keyboard navigation