StaffPerformance/wispro.sp.web/Components/Radar.razor

@using wispro.sp.web.Services 

<AntDesign.Charts.Radar @ref="_chart" TItem="RadarDataItem" Config="_chartConfig"/>

@if (HasLegend)
{
    <Row Class="legend">
        <AntDesign.Col>
            <div class="legendItem">
                <p>
                    <span class="dot" style="background-color: #aaa"></span>
                    <span></span>
                </p>
                <h6></h6>
            </div>
        </AntDesign.Col>
    </Row>
}

@inject IChartService ChartService
@code
{ 
    [Parameter] 
    public bool HasLegend { get; set; } = false;

    [Parameter] 
    public int Height { get; set; } = 343;

    private IChartComponent _chart;

    private readonly RadarConfig _chartConfig = new RadarConfig
    {
        Height = 400,
        ForceFit = true,
        AngleField = "label",
        RadiusField = "value",
        SeriesField = "name",
        RadiusAxis = new ValueAxis
        {
            Grid = new BaseAxisGrid
            {
                Line = new BaseAxisGridLine
                {
                    Type = "line"
                }
            }
        },
        Area = new RadarViewConfigArea
        {
            Visible = false
        },
        Point = new RadarViewConfigPoint
        {
            Visible = true
        },
        Legend = new Legend
        {
            Visible = true,
            Position = "bottom-center"
        },


    };

    protected override async System.Threading.Tasks.Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var data = await ChartService.GetRadarDataAsync();
        await _chart.ChangeData(data);
    }
}