Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsCharts

Pie, donut and rose

Radial charts show how parts make up a whole. Use them for a handful of slices whose shares differ clearly; with many or similar slices, a bar chart is easier to read.

Pie

One series, one slice per label. ShowValues prints each slice, as an amount or as a percentage of the whole.

36.6%25.2%19.6%13.3%5.3%
Wind
Solar
Gas
Hydro
Biomass

Donut with a centre label

CustomGraphics draws inside the chart's SVG, here the total in the hole. DonutRingRatio sets the ring's thickness.

721 GWh in total
Wind
Solar
Gas
Hydro
Biomass

Ring ratio: 0.30

Rose

A rose gives every slice the same angle and encodes the value in the radius. AngleOffset turns the chart; ScaleFactor sizes it.

420610380290510470
October
November
December
January
February
March

Angle offset: 0°

Scale factor: 0.9

Legend positions

LegendPosition places the legend around any chart type.

Fiction
Children's
Poetry
Travel

Selecting a slice

@bind-SelectedIndex returns the clicked slice, ready to drive a detail panel.

Telescopes
Outreach
Repairs
Travel

Click a slice to see its details.

Several series in one pie

With more than one series, AggregationOption decides the slices: one per label, summed across series, or one per series.

495332309
Wind
Solar
Gas

Starting .NET in your browser…