Circular charts

Pie, donut, polar area, radial bars and gauge.

Each example is a complete component: copy its code (markup and @code), including the sample data, and replace it with yours.

1. Pie

SeriesType.Pie: XValue is the name of each slice and YValue its value (they do not need to add up to 100).

@using AstrolCharts

<AstrolChart TItem="Share" Title="Market share" Height="@(320)">

 <AstrolPointSeries TItem="Share"

 Items="shares"

 Name="Share"

 SeriesType="SeriesType.Pie"

 XValue="e => e.Browser"

 YValue="e => e.Percentage" />

</AstrolChart>

@code {

 private readonly List<Share> shares = new()

 new() { Browser = "Chrome", Percentage = 64 },

 new() { Browser = "Safari", Percentage = 19 },

 new() { Browser = "Edge", Percentage = 5 },

 new() { Browser = "Firefox", Percentage = 3 },

 new() { Browser = "Others", Percentage = 9 },

};

 public class Share

 public string Browser { get; set; } = string.Empty;

 public decimal Percentage { get; set; }

2. Donut

SeriesType.Donut with custom colors (Options.Colors) and the legend at the bottom.

@using AstrolCharts

<AstrolChart TItem="Expense" Title="Monthly budget" Options="options" Height="@(320)">

 <AstrolPointSeries TItem="Expense"

 Items="expenses"

 Name="Amount"

 SeriesType="SeriesType.Donut"

 XValue="e => e.Category"

 YValue="e => e.Amount" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Expense> options = new()

 Legend = new Legend { Position = LegendPosition.Bottom },

 // A custom color per slice (in the same order as the data)

 Colors = new List<string> { "#ffd800", "#007bff", "#12ba38", "#ff6a00", "#b200ff" },

};

 private readonly List<Expense> expenses = new()

 new() { Category = "Rent", Amount = 900 },

 new() { Category = "Food", Amount = 450 },

 new() { Category = "Transport", Amount = 180 },

 new() { Category = "Leisure", Amount = 220 },

 new() { Category = "Savings", Amount = 300 },

};

 public class Expense

 public string Category { get; set; } = string.Empty;

 public decimal Amount { get; set; }

SeriesType.PolarArea: the radius of each sector depends on its value.

@using AstrolCharts

<AstrolChart TItem="Rating" Title="Customer rating" Options="options" Height="@(320)">

 <AstrolPointSeries TItem="Rating"

 Items="ratings"

 Name="Score"

 SeriesType="SeriesType.PolarArea"

 XValue="e => e.Aspect"

 YValue="e => e.Score" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Rating> options = new()

 Fill = new Fill { Opacity = 0.85 },

 Legend = new Legend { Position = LegendPosition.Bottom },

};

 private readonly List<Rating> ratings = new()

 new() { Aspect = "Price", Score = 7 },

 new() { Aspect = "Quality", Score = 9 },

 new() { Aspect = "Support", Score = 8 },

 new() { Aspect = "Delivery", Score = 6 },

 new() { Aspect = "Design", Score = 9 },

};

 public class Rating

 public string Aspect { get; set; } = string.Empty;

 public decimal Score { get; set; }

SeriesType.RadialBar with values from 0 to 100 and the average in the center (PlotOptions.RadialBar.DataLabels.Total).

@using AstrolCharts

@* Values are percentages (0-100). *@

<AstrolChart TItem="Goal" Title="Annual goals" Options="options" Height="@(330)">

 <AstrolPointSeries TItem="Goal"

 Items="goals"

 Name="Progress"

 SeriesType="SeriesType.RadialBar"

 XValue="e => e.Name"

 YValue="e => e.Percentage" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Goal> options = new()

 PlotOptions = new PlotOptions

 RadialBar = new PlotOptionsRadialBar

 Hollow = new Hollow { Size = "35%" },

 DataLabels = new RadialBarDataLabels

 Total = new RadialBarDataLabelsTotal { Show = true, Label = "Average" },

},

},

},

};

 private readonly List<Goal> goals = new()

 new() { Name = "Sales", Percentage = 82 },

 new() { Name = "Customers", Percentage = 64 },

 new() { Name = "Courses", Percentage = 45 },

};

 public class Goal

 public string Name { get; set; } = string.Empty;

 public decimal Percentage { get; set; }

AstrolGauge shows a single percentage without defining series. It updates when Percentage changes.

@using AstrolCharts

@using Astrol.Component.Basic.Button

@using Astrol.Entities.Basic.UI

@* AstrolGauge: a single percentage without defining series. *@

<AstrolGauge Title="Disk usage" Label="Used" Percentage="percentage" />

<div style="text-align:center">

 <AstrolButton Icon="astrol-minus-1" Style="AstrolStyle.Blue" Title="-10" OnClick="() => Change(-10)" />

 <AstrolButton Icon="astrol-plus-1" Style="AstrolStyle.Blue" Title="+10" OnClick="() => Change(10)" />

</div>

@code {

 private decimal percentage = 68;

 private void Change(decimal delta) => percentage = Math.Clamp(percentage + delta, 0, 100);