DumbbellChart: Blazor dumbbell chart component

Examples

Basic

Each DumbbellItem has a Start and an End; StartLabel and EndLabel name them in the legend, and the values sit outside each pair.

p95 response time by region, before and after release 4.2

Before 4.2 After 4.2

website/Examples/Charts/DumbbellChartBasicExample.razor Source

Colours

StartColor and EndColor take any CSS colour; ShowValues="false" leaves the numbers to the tooltips.

Active seats per workspace, Q1 and Q4

Q1 Q4

website/Examples/Charts/DumbbellChartColorsExample.razor Source

Playground

p95 response time by region, before and after release 4.2

Before 4.2 After 4.2

StartLabel

EndLabel

StartColor

EndColor

ShowValues

ShowLegend

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<DumbbellChart
               StartLabel="Before 4.2"
               EndLabel="After 4.2"
               ValueFormat="{0:N0} ms"
               Title="p95 response time by region, before and after release 4.2"
               Items="@_regions" />

@code {
    private readonly DumbbellItem[] _regions =
    [
        new("Europe West", 240, 180),
        new("US East", 210, 170),
        new("US West", 260, 205),
        new("Asia Pacific", 310, 330),
        new("South America", 380, 290),
    ];
}

API

<DumbbellChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
EndColor string
= null
Colour of the end dots (any CSS colour). Defaults to the theme's primary colour.
EndLabel string
= "End"
Name of the second value, shown in the legend and tooltips.
Items IReadOnlyList<DumbbellItem>
= []
The rows, one per category. Rows whose Start or End is not a finite number are skipped.
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.
ShowLegend bool
= true
Show the legend naming the two values.
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.
ShowValues bool
= true
Write each value beside its dot.
StartColor string
= "color-mix(in oklab, var(--color-base-content) 40%, transparent)"
Colour of the start dots (any CSS colour). Defaults to a muted text colour so the end stands out.
StartLabel string
= "Start"
Name of the first value, shown in the legend and tooltips.
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 labels and tooltips, e.g. "{0:N0} ms".
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.
EndColor	string	null	Colour of the end dots (any CSS colour). Defaults to the theme's primary colour.
EndLabel	string	"End"	Name of the second value, shown in the legend and tooltips.
Items	IReadOnlyList<DumbbellItem>	[]	The rows, one per category. Rows whose Start or End is not a finite number are skipped.
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.
ShowLegend	bool	true	Show the legend naming the two values.
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.
ShowValues	bool	true	Write each value beside its dot.
StartColor	string	"color-mix(in oklab, var(--color-base-content) 40%, transparent)"	Colour of the start dots (any CSS colour). Defaults to a muted text colour so the end stands out.
StartLabel	string	"Start"	Name of the first value, shown in the legend and tooltips.
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 labels and tooltips, e.g. "{0:N0} ms".
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.