Examples
Each PolarSeries holds PolarPoint values (angle, radius). AngleMax="24" makes a full turn a day, AngleStep spaces the spokes and AngleFormat writes their labels; Closed joins the last point back to the first.
Mode="PolarChartMode.Area" fills each series (Marker draws dots only) and Smooth turns the lines into splines. StartAngle and Clockwise move and turn the angle axis.
Stacked="true" draws each series on top of the running total of the series before it at the same angle; with Mode="PolarChartMode.Area" each fills the band between the two totals. Percent="true" makes each angle's total 100%. Tooltips keep each point's own value and add the total and its share.
Playground
<PolarChart
Closed="true"
AngleMax="24"
AngleStep="3"
AngleFormat="{0:00}:00"
ValueFormat="{0:N0} ms"
Title="API latency by hour of day (UTC)"
Series="@_latency" />
@code {
// p95 and p50 latency of the Acme Cloud API, one point per hour; Closed joins 23:00 back to 00:00.
private static readonly double[] _p95 = [118, 112, 106, 104, 108, 121, 146, 182, 214, 236, 241, 238, 232, 236, 244, 239, 226, 205, 184, 168, 152, 140, 131, 124];
private static readonly double[] _p50 = [42, 40, 38, 37, 39, 44, 53, 66, 78, 86, 88, 87, 84, 86, 89, 87, 82, 74, 66, 60, 55, 51, 47, 44];
private readonly PolarSeries[] _latency =
[
new("p95", [.. _p95.Select((v, h) => new PolarPoint(h, v))]),
new("p50", [.. _p50.Select((v, h) => new PolarPoint(h, v))]),
];
}API
<PolarChart>
DaisyBlazor.ChartsParameters
- AngleFormat string= "{0:#,0.##}"
Format string for angles on the spokes and in tooltips, e.g. "{0}°" or "{0:00}:00".
- AngleMax double= 360
The angle of a full turn: 360 for degrees (default), 24 for the hours of a day, 12 for months.
- AngleStep double?= null
Angle between the spokes and their labels, in angle units; null draws twelve (every 30° of 360, every 2 of 24).
- AspectRatio double= 1
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Clockwise bool= true
Angles grow clockwise (default); false turns them anticlockwise, as in mathematics.
- Closed bool= false
Join each line's last point back to its first (areas are always closed).
- Levels int= 4
About how many radius rings to draw; the exact count follows nice tick values.
- Mode PolarChartMode= PolarChartMode.Line
Draw lines (default), filled areas or markers only.
- Percent bool= false
Stack the series to 100%: each angle's total fills the radius (implies Stacked).
- 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.
- Series IReadOnlyList<
PolarSeries> = []The series of points to plot.
- ShowLegend bool= true
Show a legend when there is more than one series.
- ShowPoints bool= true
Draw a dot at each point in Line and Area mode (Marker mode always does).
- 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.
- Smooth bool= false
Draw lines and areas as smooth splines through the points.
- Stacked bool= false
Stack the series: at each angle shared by several series, a point is drawn on top of the running total of the series before it; Area mode fills the band between that total and the new one. Tooltips keep each point's own value and add the angle's total and the point's share.
- StartAngle double= 0
Where angle 0 sits, in degrees clockwise from 12 o'clock.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for radii in tooltips and the description, e.g. "{0:N0} ms".
- 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.