Basic Radar Chart
Radar charts (also known as spider charts) display multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. This example shows a basic Radar chart with a single data series and demonstrates selection.
@using MudBlazor.Charts <MudPaper Class="doc-section-component-container"> <MudChart @ref="_chart" ChartType="ChartType.Radar" ChartSeries="@_series" ChartLabels="@_chartLabels" ChartOptions="@_options" Width="100%" Height="400px" MatchBoundsToSize> <CustomGraphics> <text class="mud-chart-selected-text" x="90%" y="30" dominant-baseline="middle" text-anchor="middle" fill="@_options.ChartPalette[0]"> @(_selectedIndex >= 0 ? $"Selected: {_chartLabels[_selectedIndex]}" : "") </text> </CustomGraphics> </MudChart> </MudPaper>
@code { private MudChart<double> _chart; private int _selectedIndex => (_chart?.ChartReference as Radar<double>)?.SelectedPointIndex ?? -1; private string[] _chartLabels = { "A", "B", "C", "D", "E" }; private List<ChartSeries<double>> _series = new() { new ChartSeries<double>() { Name = "Development", Data = new double[] { 90, 80, 60, 70, 85 } }, }; private RadarChartOptions _options = new RadarChartOptions { ShowDataMarkers = true, DataPointRadius = 4, ShowAxisLabels = true, FillOpacity = 0.3, AngleOffset = 0, TooltipTitleFormat = "{{X_VALUE}}", }; }
Customized Radar Chart
This example showcases more customization options for the Radar chart:
ShowGridLines,GridLevels,GridLineColor: Control the appearance of the grid.ShowAxisLabels,AxisLineColor,AxisLineWidth: Customize the axes.FillOpacity,StrokeWidth: Adjust the appearance of the data series.ShowDataMarkers,DataPointRadius: Display markers for each data point.AngleOffset: Rotates the entire chart.ChartPalette: Custom colors for different series.
@using MudBlazor.Charts <MudPaper Class="doc-section-component-container mx-8"> <MudChart ChartType="ChartType.Radar" ChartSeries="@_series" ChartLabels="@_chartLabels" ChartOptions="@_options" Width="100%" Height="500px" MatchBoundsToSize CanHideSeries /> </MudPaper>
@code { private string[] _chartLabels = { "Strength", "Agility", "Intelligence", "Charisma", "Stamina", "Luck" }; private List<ChartSeries<double>> _series = new List<ChartSeries<double>>() { new() { Name = "Warrior", Data = new double[] { 12, 5, 3, 5, 9, 2 } }, new() { Name = "Mage", Data = new double[] { 3, 3, 12, 7, 4, 7 } }, new() { Name = "Rogue", Data = new double[] { 4, 12, 6, 3, 6, 5 } } }; private RadarChartOptions _options = new RadarChartOptions { ShowGridLines = true, GridLevels = 3, GridLineColor = "rgba(128,128,128,0.3)", ShowAxisLabels = true, AxisLineColor = "navy", AxisLineWidth = 1.5, FillOpacity = 0.3, StrokeWidth = 2.5, ShowDataMarkers = true, DataPointRadius = 5, AngleOffset = 30, TooltipTitleFormat = "{{SERIES_NAME}}: {{X_VALUE}}", }; }