AstrolUI AstrolUI
Amarillo Naranja Rojo Verde Azul Morado Color propio
Modo claro
Gráficas circulares

Tarta, dona, área polar, barras radiales e indicador (gauge).

Cada ejemplo es un componente completo: copie su código (marcado y @code), incluidos los datos de prueba, y sustitúyalos por los suyos.

1. Tarta

SeriesType.Pie: XValue es el nombre de cada porción e YValue su valor (no hace falta que sumen 100).
Chrome
Safari
Edge
Firefox
Others
Market share
@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. Dona

SeriesType.Donut con colores propios (Options.Colors) y la leyenda abajo.
Rent
Food
Transport
Leisure
Savings
Monthly budget
@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; }
 }
}

3. Área polar

SeriesType.PolarArea: el radio de cada sector depende de su valor.
Price
Quality
Support
Delivery
Design
987654321Customer rating
@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; }
 }
}

4. Barras radiales

SeriesType.RadialBar con valores de 0 a 100 y el promedio en el centro (PlotOptions.RadialBar.DataLabels.Total).
Average63.666666666666664%Annual goals
@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; }
 }
}

5. Indicador (AstrolGauge)

AstrolGauge muestra un solo porcentaje sin definir series. Al cambiar Percentage se actualiza.
Used68%Disk usage
@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);
}

Más ejemplos

Gráficas básicas Otros tipos Rangos y finanzas Interacción
Markdown para IA © 2026 AstrolUI v10.0.13