BeeswarmChart: Blazor beeswarm chart component

Examples

Basic

Each ValueGroup becomes a row; hover a dot for its value.

Weekly active seats per customer, by plan

website/Examples/Charts/BeeswarmChartBasicExample.razor Source

One row

A single group with an empty name draws one unlabelled row. Radius sets the dot size; a crowded row squeezes its dots rather than spill over.

website/Examples/Charts/BeeswarmChartSingleExample.razor Source

Playground

Weekly active seats per customer, by plan

ValueTitle

Radius

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<BeeswarmChart
               ValueTitle="Active seats"
               ValueFormat="{0:N0} seats"
               Title="Weekly active seats per customer, by plan"
               AspectRatio="1.5"
               Groups="@_plans" />

@code {
    // Every customer is one dot, so small groups and gaps stay visible.
    private readonly ValueGroup[] _plans =
    [
        new("Starter", DistributionSamples.Normal(seed: 71, count: 40, mean: 9, sd: 4, min: 1, decimals: 0)),
        new("Pro", DistributionSamples.Normal(seed: 72, count: 45, mean: 28, sd: 8, min: 5, decimals: 0)),
        new("Enterprise", DistributionSamples.Normal(seed: 73, count: 18, mean: 70, sd: 14, min: 30, decimals: 0)),
    ];
}

API

<BeeswarmChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Groups IReadOnlyList<ValueGroup>
= []
The groups, one row each, with their raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Radius double
= 4
Dot radius in chart units. A row too crowded for its height lets dots overlap rather than spill into the next.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for values in tooltips, e.g. "{0:N0} min".
ValueTitle string
= null
Title of the value axis, e.g. "Session length (min)".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Groups	IReadOnlyList<ValueGroup>	[]	The groups, one row each, with their raw values. Values that are not finite numbers are ignored; empty groups are not drawn.
Radius	double	4	Dot radius in chart units. A row too crowded for its height lets dots overlap rather than spill into the next.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for values in tooltips, e.g. "{0:N0} min".
ValueTitle	string	null	Title of the value axis, e.g. "Session length (min)".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.

ValueGroup

DaisyBlazor.Charts

A named set of raw values, summarised by BoxPlotChart, ViolinChart, BeeswarmChart and RidgelineChart. Values that are not finite numbers are ignored; a group with none left is not drawn.

Properties

Color string
Optional CSS colour; falls back to the theme palette by position.
Name string
Group label, shown on the axis and in tooltips.
Values IReadOnlyList<double>
The raw observations.

Name	Type	Description
Color	string	Optional CSS colour; falls back to the theme palette by position.
Name	string	Group label, shown on the axis and in tooltips.
Values	IReadOnlyList<double>	The raw observations.

Methods

<Clone>$ () → ValueGroup
Deconstruct (String& Name, IReadOnlyList`1& Values, String& Color) → void
Equals (object obj) → bool
Equals (ValueGroup other) → bool
GetHashCode () → int
ToString () → string

Name	Signature	Description
<Clone>$	() → ValueGroup
Deconstruct	(String& Name, IReadOnlyList`1& Values, String& Color) → void
Equals	(object obj) → bool
Equals	(ValueGroup other) → bool
GetHashCode	() → int
ToString	() → string