AstrolUI AstrolUI
Amarillo Naranja Rojo Verde Azul Morado Color propio
Modo claro
Otros tipos

Radar, dispersión, burbujas, mapa de calor y treemap.

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. Radar

Una serie por persona creada con @foreach y filtrando la misma lista.
Ana
Luis
C#SQLCSSTestingDesign9876543210Team skills
Download SVG
Download PNG
Download CSV
@using AstrolCharts
 
@* One series per person: each one filters the same list. *@
<AstrolChart TItem="SkillScore" Title="Team skills" Height="@(340)">
 @foreach (var person in scores.Select(s => s.Person).Distinct())
 {
 <AstrolPointSeries TItem="SkillScore"
 Items="scores.Where(s => s.Person == person)"
 Name="@person"
 SeriesType="SeriesType.Radar"
 XValue="e => e.Skill"
 YValue="e => e.Score" />
 }
</AstrolChart>
 
@code {
 private readonly List<SkillScore> scores = new()
 {
 new() { Person = "Ana", Skill = "C#", Score = 9 },
 new() { Person = "Ana", Skill = "SQL", Score = 7 },
 new() { Person = "Ana", Skill = "CSS", Score = 5 },
 new() { Person = "Ana", Skill = "Testing", Score = 8 },
 new() { Person = "Ana", Skill = "Design", Score = 4 },
 new() { Person = "Luis", Skill = "C#", Score = 6 },
 new() { Person = "Luis", Skill = "SQL", Score = 9 },
 new() { Person = "Luis", Skill = "CSS", Score = 8 },
 new() { Person = "Luis", Skill = "Testing", Score = 5 },
 new() { Person = "Luis", Skill = "Design", Score = 7 },
 };
 
 public class SkillScore
 {
 public string Person { get; set; } = string.Empty;
 public string Skill { get; set; } = string.Empty;
 public decimal Score { get; set; }
 }
}

2. Dispersión

XAxisType.Numeric: cada objeto es un punto (x, y). Una serie por grupo.
Women
Men
Height vs. weight85858080757570706565606055555050Weight (kg)158.0158.0162.7162.7167.3167.3172.0172.0176.7176.7181.3181.3186.0186.0Height (cm)
Download SVG
Download PNG
Download CSV
@using AstrolCharts
 
@* Numeric X axis: each point is an (x, y) pair. *@
<AstrolChart TItem="Measure" Title="Height vs. weight" XAxisType="XAxisType.Numeric" Options="options" Height="@(320)">
 @foreach (var group in measures.Select(m => m.Group).Distinct())
 {
 <AstrolPointSeries TItem="Measure"
 Items="measures.Where(m => m.Group == group)"
 Name="@group"
 SeriesType="SeriesType.Scatter"
 XValue="e => e.Height"
 YValue="e => e.Weight" />
 }
</AstrolChart>
 
@code {
 private readonly AstrolChartOptions<Measure> options = new()
 {
 Xaxis = new XAxis { Title = new AxisTitle { Text = "Height (cm)" }, TickAmount = 6 },
 Yaxis = new List<YAxis> { new YAxis { Title = new AxisTitle { Text = "Weight (kg)" } } },
 Markers = new Markers { Size = 7 },
 };
 
 private readonly List<Measure> measures = new()
 {
 new() { Group = "Women", Height = 158, Weight = 52 },
 new() { Group = "Women", Height = 162, Weight = 57 },
 new() { Group = "Women", Height = 167, Weight = 60 },
 new() { Group = "Women", Height = 171, Weight = 63 },
 new() { Group = "Women", Height = 164, Weight = 66 },
 new() { Group = "Men", Height = 170, Weight = 68 },
 new() { Group = "Men", Height = 176, Weight = 74 },
 new() { Group = "Men", Height = 181, Weight = 80 },
 new() { Group = "Men", Height = 186, Weight = 85 },
 new() { Group = "Men", Height = 174, Weight = 79 },
 };
 
 public class Measure
 {
 public string Group { get; set; } = string.Empty;
 public decimal Height { get; set; }
 public decimal Weight { get; set; }
 }
}

3. Burbujas

AstrolBubbleSeries: YAggregate da la altura (precio medio) y ZAggregate el tamaño (cantidad).
Housing market350.00000000000000350.00000000000000300.00000000000000300.00000000000000250.00000000000000250.00000000000000200.00000000000000200.00000000000000150.00000000000000150.00000000000000100.00000000000000100.0000000000000050.0000000000000050.000000000000000.000000000000000.00000000000000Average price (k)LimaLimaBogotaBogotaQuitoQuito
Download SVG
Download PNG
Download CSV
@using AstrolCharts
 
@* X = city, Y = average price, Z (bubble size) = number of sales. *@
<AstrolChart TItem="HouseSale" Title="Housing market" Options="options" Height="@(320)">
 <AstrolBubbleSeries TItem="HouseSale"
 Items="sales"
 Name="Sales"
 XValue="e => e.City"
 YAggregate="e => e.Average(s => s.Price)"
 ZAggregate="e => e.Count()" />
</AstrolChart>
 
@code {
 private readonly AstrolChartOptions<HouseSale> options = new()
 {
 Yaxis = new List<YAxis> { new YAxis { Title = new AxisTitle { Text = "Average price (k)" } } },
 Fill = new Fill { Opacity = 0.7 },
 };
 
 private readonly List<HouseSale> sales = new()
 {
 new() { City = "Lima", Price = 120 },
 new() { City = "Lima", Price = 140 },
 new() { City = "Lima", Price = 110 },
 new() { City = "Bogota", Price = 95 },
 new() { City = "Bogota", Price = 105 },
 new() { City = "Madrid", Price = 310 },
 new() { City = "Madrid", Price = 280 },
 new() { City = "Madrid", Price = 330 },
 new() { City = "Madrid", Price = 300 },
 new() { City = "Quito", Price = 85 },
 };
 
 public class HouseSale
 {
 public string City { get; set; } = string.Empty;
 public decimal Price { get; set; }
 }
}

4. Mapa de calor

SeriesType.Heatmap: cada serie es una fila (día) y X la columna (hora); el color indica el valor.
Activity by day and hourFriFriThuThuWedWedTueTueMonMon08h08h10h10h12h12h14h14h16h16h18h18h
Download SVG
Download PNG
Download CSV
@using AstrolCharts
 
@* One series (row) per day; X = hour. The color shows the value. *@
<AstrolChart TItem="Activity" Title="Activity by day and hour" Options="options" Height="@(320)">
 @foreach (var day in days)
 {
 <AstrolPointSeries TItem="Activity"
 Items="activity.Where(a => a.Day == day)"
 Name="@day"
 SeriesType="SeriesType.Heatmap"
 XValue="e => e.Hour"
 YValue="e => e.Count" />
 }
</AstrolChart>
 
@code {
 private static readonly string[] days = { "Mon", "Tue", "Wed", "Thu", "Fri" };
 private static readonly string[] hours = { "08h", "10h", "12h", "14h", "16h", "18h" };
 
 private readonly AstrolChartOptions<Activity> options = new()
 {
 Colors = new List<string> { "#007bff" },
 DataLabels = new DataLabels { Enabled = true },
 };
 
 // Deterministic sample data
 private readonly List<Activity> activity = days
 .SelectMany((day, d) => hours.Select((hour, h) => new Activity { Day = day, Hour = hour, Count = (d * 7 + h * 13) % 40 + 5 }))
 .ToList();
 
 public class Activity
 {
 public string Day { get; set; } = string.Empty;
 public string Hour { get; set; } = string.Empty;
 public decimal Count { get; set; }
 }
}

5. Treemap

SeriesType.Treemap: el área de cada rectángulo es proporcional a su valor.
Disk usage by folder
Download SVG
Download PNG
Download CSV
@using AstrolCharts
 
@* Each rectangle's area is proportional to its value. *@
<AstrolChart TItem="Folder" Title="Disk usage by folder" Options="options" Height="@(320)">
 <AstrolPointSeries TItem="Folder"
 Items="folders"
 Name="GB"
 SeriesType="SeriesType.Treemap"
 XValue="e => e.Name"
 YValue="e => e.SizeGb" />
</AstrolChart>
 
@code {
 private readonly AstrolChartOptions<Folder> options = new()
 {
 PlotOptions = new PlotOptions { Treemap = new PlotOptionsTreemap { Distributed = true, EnableShades = false } },
 Legend = new Legend { Show = false },
 };
 
 private readonly List<Folder> folders = new()
 {
 new() { Name = "Videos", SizeGb = 210 },
 new() { Name = "Photos", SizeGb = 120 },
 new() { Name = "Projects", SizeGb = 95 },
 new() { Name = "Music", SizeGb = 48 },
 new() { Name = "Documents", SizeGb = 22 },
 new() { Name = "Downloads", SizeGb = 64 },
 new() { Name = "Backups", SizeGb = 150 },
 };
 
 public class Folder
 {
 public string Name { get; set; } = string.Empty;
 public decimal SizeGb { get; set; }
 }
}

Más ejemplos

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