RadialBarChart: Blazor radial bar chart component

Examples

Basic

Each ChartDataPoint is a ring, the first outside; a full ring is Max (100 by default).

Quota used per resource

website/Examples/Charts/RadialBarChartBasicExample.razor Source

Max

Max sets what a full ring means, here the 8 onboarding steps; a point's Color overrides the palette.

Onboarding steps done

website/Examples/Charts/RadialBarChartMaxExample.razor Source

Playground

Quota used per resource

Max

ShowValues

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<RadialBarChart
                ValueFormat="{0}%"
                Title="Quota used per resource"
                Data="@_quota" />

@code {
    private readonly ChartDataPoint[] _quota =
    [
        new("Compute", 72),
        new("Storage", 82),
        new("Bandwidth", 45),
        new("Seats", 93),
    ];
}

API

<RadialBarChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Data IReadOnlyList<ChartDataPoint>
= []
One ring per point, outermost first. A point's Color overrides the theme palette.
Max double
= 100
The value of a full ring; values are clamped to [0, Max]. Zero or less uses the largest value.
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.
ShowValues bool
= true
Print each item's value after its name.
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}%".
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	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Data	IReadOnlyList<ChartDataPoint>	[]	One ring per point, outermost first. A point's Color overrides the theme palette.
Max	double	100	The value of a full ring; values are clamped to [0, Max]. Zero or less uses the largest value.
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.
ShowValues	bool	true	Print each item's value after its name.
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}%".
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.