Radar Chart
Radar charts for comparing values across categories
RadarChart compares values across several categories on radial axes. Built on ApexCharts, with the same custom tooltips and themes as the other ShellUI charts.
Installation
shellui add radar-chartshellui add also installs chart and its styles, and adds the Blazor-ApexCharts NuGet package to your project.
Usage
<RadarChart TItem="Skill"
Data="@_skills"
Title="Team skills"
Name="Score"
XValue="@(s => s.Area)"
YValue="@(s => (decimal?)s.Score)"
Height="400px" />
@code {
private List<Skill> _skills = new()
{
new("Frontend", 80), new("Backend", 70), new("DevOps", 55),
new("Design", 65), new("Testing", 75)
};
record Skill(string Area, int Score);
}API Reference
| Property | Type | Default | Description |
|---|---|---|---|
TItem | Generic type | — | The data item type |
Data | IEnumerable<TItem>? | null | Data collection to visualize |
Name | string | "Data" | Series name shown in the tooltip |
XValue | Func<TItem, object>? | null | Category label for each item |
YValue | Func<TItem, decimal?>? | null | Numeric value for each item |
Theme | ChartTheme | Default | Color theme (Default, Colorful, Monochrome) |
Title | string? | null | Chart title |
Subtitle | string? | null | Chart subtitle |
Height | string? | "400px" | Chart height |
Width | string? | "100%" | Chart width |
ShowLegend | bool | true | Show the legend |
ShowToolbar | bool | false | Show the ApexCharts toolbar |
Class | string? | null | Additional CSS classes |