PieChart: Blazor pie chart component

Examples

Basic

Slices start at 12 o'clock and run clockwise, coloured from the theme palette.

Plan mix

Free41%
Pro34%
Team18%
Enterprise7%

website/Examples/Charts/PieChartBasicExample.razor Source

Colours and legend

Set a Color per point and hide the legend with ShowLegend="false".

Traffic by region

With legend

Europe52%
North America18%
Asia Pacific16%
Elsewhere14%

website/Examples/Charts/PieChartColorsExample.razor Source

Others slice

OthersThreshold (a fraction: 0.05 is 5 %) merges the slices below it into one slice named OthersLabel, drawn last; its tooltip lists what it holds. A single small slice is kept as it is.

Requests by region

eu-west39.4%
us-east34%
ap-south11.8%
us-west9.4%
Other regions5.4%

website/Examples/Charts/PieChartOthersExample.razor Source

Exploded slice

Exploded lists the labels of the slices to pull out along their bisector, by ExplodeOffset times the radius (default 0.08); the pie shrinks so they stay in the box.

Plan mix, Enterprise highlighted

Free41%
Pro34%
Team18%
Enterprise7%

website/Examples/Charts/PieChartExplodedExample.razor Source

Playground

Plan mix

Free41%
Pro34%
Team18%
Enterprise7%

ShowLegend

ShowPercent

ExplodeOffset

OthersThreshold

Height

<PieChart Height="13rem" Title="Plan mix" Data="@_plans" />

@code {
    private readonly ChartDataPoint[] _plans =
    [
        new("Free", 41),
        new("Pro", 34),
        new("Team", 18),
        new("Enterprise", 7),
    ];
}

API

<PieChart>

DaisyBlazor.Charts

Parameters

CenterLabel string
= null
Optional label rendered in the centre of the hole; shown only when InnerRadiusRatio is above 0.
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 pie; the merged slice is named by OthersLabel.
Height string
= "16rem"
CSS height of the SVG.
InnerRadiusRatio double
= 0
Inner radius as a fraction of the outer radius (0 = pie; above 0 renders a ring like DonutChart).
OthersLabel string
= "Other"
Label of the slice that gathers the slices below OthersThreshold.
OthersThreshold double
= 0
Merge the slices whose share of the whole is below this fraction (0.05 = 5 %) into one slice named OthersLabel, drawn last; its tooltip lists what it holds. 0 (default) keeps every slice, and a single small slice is never merged on its own.
Rings IReadOnlyList<DonutRing>
= null
Concentric rings instead of Data, outermost first, sharing the hole; each ring's slices make up its own whole. A label keeps one colour in every ring and the legend lists each label once. OthersThreshold applies to each ring, Exploded only to Data.
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
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
CenterLabel	string	null	Optional label rendered in the centre of the hole; shown only when InnerRadiusRatio is above 0.
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 pie; the merged slice is named by OthersLabel.
Height	string	"16rem"	CSS height of the SVG.
InnerRadiusRatio	double	0	Inner radius as a fraction of the outer radius (0 = pie; above 0 renders a ring like DonutChart).
OthersLabel	string	"Other"	Label of the slice that gathers the slices below OthersThreshold.
OthersThreshold	double	0	Merge the slices whose share of the whole is below this fraction (0.05 = 5 %) into one slice named OthersLabel, drawn last; its tooltip lists what it holds. 0 (default) keeps every slice, and a single small slice is never merged on its own.
Rings	IReadOnlyList<DonutRing>	null	Concentric rings instead of Data, outermost first, sharing the hole; each ring's slices make up its own whole. A label keeps one colour in every ring and the legend lists each label once. OthersThreshold applies to each ring, Exploded only to Data.
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	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.