RangeBarChart: Blazor range bar chart component

Examples

Basic

Each RangeBarItem spans from Low to High; ShowValues writes both ends beside the bar.

Seats per plan, minimum to maximum

website/Examples/Charts/RangeBarChartBasicExample.razor Source

Grouped

Items with the same Label share a band and each Group gets its own slot, colour and legend entry; GroupColors maps a group to any CSS colour.

Response time by region, p50 to p99 (ms)

Before 4.2 After 4.2

website/Examples/Charts/RangeBarChartGroupedExample.razor Source

ValueFormatter writes the values on the axis, beside the bars and in tooltips; RangeBarChart.TimeOfDay prints hours past midnight as a time (25 as 01:00), and RangeBarItem.FromTimes builds an item from two TimeOnly values, past midnight when the end is before the start.

Night shifts

website/Examples/Charts/RangeBarChartTimeOfDayExample.razor Source

Playground

Seats per plan, minimum to maximum

Horizontal

ShowValues

ShowLegend

ValueFormat

Min

Max

Title

ShowTitle

AspectRatio

RowHeight

<RangeBarChart
               ShowValues="true"
               ValueFormat="{0:N0}"
               Title="Seats per plan, minimum to maximum"
               Items="@_plans" />

@code {
    private readonly RangeBarItem[] _plans =
    [
        new("Starter", 1, 5),
        new("Team", 5, 50),
        new("Business", 25, 250),
        new("Scale", 100, 1000),
    ];
}

API

<RangeBarChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
GroupColors IReadOnlyDictionary<string, string>
= null
Optional colour per group name (any CSS colour); other groups cycle through the theme palette.
Horizontal bool
= true
Lay the bars out as rows (the default); false stands them up as columns.
Items IReadOnlyList<RangeBarItem>
= []
The bars. Items with the same Label share a category; Group splits it into side-by-side slots. Items whose Low or High is not a finite number are skipped.
Max double?
= null
End of the value axis, e.g. 0 for "now". Defaults to the highest value, rounded; spans are clipped to it, and spans entirely after it are left out.
Min double?
= null
Start of the value axis, e.g. -24 for "the last 24 hours". Defaults to the lowest value, rounded; spans are clipped to it, and spans entirely before it are left out.
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 a legend when there is more than one group.
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
= false
Write the low and high values at the ends of each bar.
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} GB".
ValueFormatter Func<double, string>
= null
Optional function writing a value, used for the value axis ticks, labels and tooltips instead of ValueFormat. TimeOfDay prints hours past midnight as a time of day (25 as 01:00).
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.
GroupColors	IReadOnlyDictionary<string, string>	null	Optional colour per group name (any CSS colour); other groups cycle through the theme palette.
Horizontal	bool	true	Lay the bars out as rows (the default); false stands them up as columns.
Items	IReadOnlyList<RangeBarItem>	[]	The bars. Items with the same Label share a category; Group splits it into side-by-side slots. Items whose Low or High is not a finite number are skipped.
Max	double?	null	End of the value axis, e.g. 0 for "now". Defaults to the highest value, rounded; spans are clipped to it, and spans entirely after it are left out.
Min	double?	null	Start of the value axis, e.g. -24 for "the last 24 hours". Defaults to the lowest value, rounded; spans are clipped to it, and spans entirely before it are left out.
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 a legend when there is more than one group.
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	false	Write the low and high values at the ends of each bar.
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} GB".
ValueFormatter	Func<double, string>	null	Optional function writing a value, used for the value axis ticks, labels and tooltips instead of ValueFormat. TimeOfDay prints hours past midnight as a time of day (25 as 01:00).
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.

RangeBarChart