DonutChart: Blazor donut chart component

Examples

With a center label

CenterLabel prints a headline figure inside the ring.

Signups by channel

Organic search47.9%
Referral25.4%
Paid ads15.8%
Social10.8%

website/Examples/Charts/DonutChartBasicExample.razor Source

Ring thickness

InnerRadiusRatio (default 0.6) sets the hole size: higher is a thinner ring, which makes a neat progress gauge.

Storage used

Thick ring

website/Examples/Charts/DonutChartRingExample.razor Source

Rings takes a list of DonutRing (a name and its data), drawn as concentric rings sharing the hole, outermost first. A label keeps one colour in every ring, the legend lists each label once, and tooltips name the ring.

Plan mix, this year (outer) and last year (inner)

Free
Pro
Team
Enterprise

website/Examples/Charts/DonutChartRingsExample.razor Source

Playground

Signups by channel

Organic search47.9%
Referral25.4%
Paid ads15.8%
Social10.8%

InnerRadiusRatio

CenterLabel

ShowLegend

ShowPercent

ExplodeOffset

Height

<DonutChart
            CenterLabel="2.4 k"
            Height="13rem"
            Title="Signups by channel"
            Data="@_channels" />

@code {
    private readonly ChartDataPoint[] _channels =
    [
        new("Organic search", 1_150),
        new("Referral", 610),
        new("Paid ads", 380),
        new("Social", 260),
    ];
}

API

<DonutChart>

DaisyBlazor.Charts

Parameters

CenterLabel string
= null
Optional label rendered in the center of the hole.
Data IReadOnlyList<ChartDataPoint>
= []
Slice data; each point's value contributes to the whole.
ExplodeOffset double
= 0.08
How far exploded slices move out along their bisector, as a fraction of the radius (0 to 0.5).
Exploded IReadOnlyList<string>
= null
Labels of the slices to pull out of the ring.
Height string
= "16rem"
CSS height of the SVG.
InnerRadiusRatio double
= 0.6
Inner radius as a fraction of the outer radius (the donut hole size; 0 draws a full pie).
OthersLabel string
= "Other"
Label of the slice that gathers the slices below OthersThreshold.
OthersThreshold double
= 0
Merge the slices whose share is below this fraction (0.05 = 5 %) into one OthersLabel slice; 0 (default) keeps every slice.
Rings IReadOnlyList<DonutRing>
= null
Concentric rings instead of Data, outermost first, sharing the hole; a label keeps one colour in every ring.
ShowLegend bool
= true
Show a legend with labels and percentages.
ShowPercent bool
= true
Show each slice's share of the whole in the legend, its tooltip and the description (default true).
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.
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Extra CSS classes added to the chart wrapper.
Style string
= null
Inline styles appended to the chart wrapper, after the width from Width.

Name	Type	Default	Description
CenterLabel	string	null	Optional label rendered in the center of the hole.
Data	IReadOnlyList<ChartDataPoint>	[]	Slice data; each point's value contributes to the whole.
ExplodeOffset	double	0.08	How far exploded slices move out along their bisector, as a fraction of the radius (0 to 0.5).
Exploded	IReadOnlyList<string>	null	Labels of the slices to pull out of the ring.
Height	string	"16rem"	CSS height of the SVG.
InnerRadiusRatio	double	0.6	Inner radius as a fraction of the outer radius (the donut hole size; 0 draws a full pie).
OthersLabel	string	"Other"	Label of the slice that gathers the slices below OthersThreshold.
OthersThreshold	double	0	Merge the slices whose share is below this fraction (0.05 = 5 %) into one OthersLabel slice; 0 (default) keeps every slice.
Rings	IReadOnlyList<DonutRing>	null	Concentric rings instead of Data, outermost first, sharing the hole; a label keeps one colour in every ring.
ShowLegend	bool	true	Show a legend with labels and percentages.
ShowPercent	bool	true	Show each slice's share of the whole in the legend, its tooltip and the description (default true).
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.
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Extra CSS classes added to the chart wrapper.
Style	string	null	Inline styles appended to the chart wrapper, after the width from Width.

DonutChart