Blazor Radar Chart

A BlazorExpress.ChartJS radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

How it works #

In the following example, a categorical 12-color palette is used.

TIP

For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

<RadarChart @ref="radarChart" Width="600" />

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
</div>

@code {
    private RadarChart radarChart = default!;
    private RadarChartOptions radarChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? chartColors;

    private int datasetsCount;
    private int dataLabelsCount;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartColors = ColorUtility.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        radarChartOptions = new() { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await radarChart.InitializeAsync(chartData, radarChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is RadarChartDataset radarChartDataset
                && radarChartDataset is not null
                && radarChartDataset.Data is not null)
            {
                var count = radarChartDataset.Data.Count;

                var newData = new List<double?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                radarChartDataset.Data = newData;
                newDatasets.Add(radarChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await radarChart.UpdateAsync(chartData, radarChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (datasetsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomRadarChartDataset();
        chartData = await radarChart.AddDatasetAsync(chartData, chartDataset, radarChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        dataLabelsCount += 1;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is RadarChartDataset radarChartDataset)
                data.Add(new RadarChartDatasetData(radarChartDataset.Label, random.Next(200)));
        }

        chartData = await radarChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    #region Data Preparation

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            dataLabelsCount += 1;
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Day {dataLabelsCount}";

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomRadarChartDataset());
        }

        return datasets;
    }

    private RadarChartDataset GetRandomRadarChartDataset()
    {
        var c = chartColors![datasetsCount].ToChartColor();

        datasetsCount += 1;

        return new RadarChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToChartRgbaString(),
                BorderColor = c.ToChartRgbaString(0.8),
                BorderWidth = 2,
                Fill = true,
                HoverBorderWidth = 4,
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    #endregion Data Preparation

}

Click event #

Set the OnClick callback to react when a radar data point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and raw value.

<RadarChart @ref="radarChart" Width="600" OnClick="HandleClickAsync" />

@if (selectedChartItem is not null)
{
    <p class="mt-3 mb-0">
        Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex),
        @FormatLabel(selectedChartItem) (index @selectedChartItem.Index),
        value @FormatValue(selectedChartItem)
    </p>
}

@code {
    private RadarChart radarChart = default!;
    private RadarChartOptions radarChartOptions = default!;
    private ChartData chartData = default!;
    private ChartClickEventArgs? selectedChartItem;

    protected override void OnInitialized()
    {
        chartData = new ChartData
        {
            Labels = new List<string> { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" },
            Datasets = new List<IChartDataset>
            {
                new RadarChartDataset
                {
                    Label = "Vehicle A",
                    Data = new List<double?> { 80, 72, 65, 90, 78 },
                    BackgroundColor = "rgba(153, 102, 255, 0.2)",
                    BorderColor = "rgba(153, 102, 255, 0.8)",
                    BorderWidth = 2,
                    Fill = true,
                },
            },
        };

        radarChartOptions = new RadarChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await radarChart.InitializeAsync(chartData, radarChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }

    private Task HandleClickAsync(ChartClickEventArgs eventArgs)
    {
        selectedChartItem = eventArgs;
        return Task.CompletedTask;
    }

    private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}";

    private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null";
}

Chart Components — Dedicated Library

Chart components have been moved to the dedicated BlazorExpress.ChartJS library to support independent feature additions and easier maintenance. Complete the following steps in the Blazor project that renders the charts.

Install the package used by these demos:

dotnet add package BlazorExpress.ChartJS --version 1.2.4

Import the component namespace in _Imports.razor:
```
@using BlazorExpress.ChartJS
```

Load the browser scripts in this order from the host page, after the Blazor framework script. The data-labels plugin is needed only when a chart uses data labels.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>

See the BlazorExpress.ChartJS website and GitHub repository for current package documentation. We also recommend checking the original BlazorExpress.ChartJS demos when adapting advanced examples.

For a complete charts setup walkthrough, see the Getting Started — Charts Setup section.

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Radar Chart

How it works #

Click event #

Chart Components — Dedicated Library

Links

Guides

Community

Other Libraries