Blazor Radar Chart

A Blazor Bootstrap 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.

Parameters

Name	Type	Default	Required	Description	Added Version
Height	int?	null		Gets or sets chart container height.	3.0.0
HeightUnit	Unit	Unit.Px		Gets or sets chart container height unit of measure.	3.0.0
Width	int?	null		Gets or sets chart container width.	3.0.0
WidthUnit	Unit	Unit.Px		Gets or sets chart container width unit of measure.	3.0.0

Methods

Name	Return type	Description	Added Version
AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)	Task<ChartData>	Adds data to chart.	3.0.0
AddDataAsync(ChartData chartData, string dataLabel, List<IChartDatasetData> data)	Task<ChartData>	Adds dataset to chart.	3.0.0
AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions)	Task<ChartData>	Adds dataset to chart.	1.10.0
InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null)	Task	Initialize the chat.	3.0.0
ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px)	Task	Resize the chart.	3.0.0
UpdateAsync(ChartData chartData, IChartOptions chartOptions)	Task	Update the chart.	3.0.0

ChartData Members

Property Name	Type	Default	Required	Description	Added Version
Datasets	List<IChartDataset>	null	✔️	Gets or sets the Datasets.	3.0.0
Labels	List<string>	null	✔️	Gets or sets the Labels.	3.0.0

RadarChartDataset Members

info

RadarChartDataset implements IChartDataset and inherits from the parent class ChartDataset.

Property Name	Type	Default	Required	Description	Added Version
BackgroundColor	string	rgba(0, 0, 0, 0.1)		Get or sets the line fill color.	3.0.0
BorderCapStyle	string	butt		Cap style of the line. Supported values are 'butt', 'round', and 'square'.	3.0.0
BorderColor	string	rgba(0, 0, 0, 0.1)		Get or sets the line color.	3.0.0
BorderDash	List<double>?	null		Gets or sets the length and spacing of dashes.	3.0.0
BorderDashOffset	double	0.0		Offset for line dashes.	3.0.0
BorderJoinStyle	string	miter		Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'.	3.0.0
BorderWidth	double	3		Gets or sets the line width (in pixels).	3.0.0
Clip	string?	null		How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}	1.0.0
Data	List<double?>?	null	✔️	Get or sets the Data.	3.0.0
Datalabels	PieChartDatasetDataLabels			Get or sets the data labels	3.0.0
Fill	bool	false		How to fill the area under the line.	3.0.0
Hidden	bool	false		Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.	3.0.0
HoverBackgroundColor	string?	null		The line fill color when hovered.	3.0.0
HoverBorderCapStyle	string?	null		Cap style of the line when hovered.	3.0.0
HoverBorderColor	string?	null		The line color when hovered.	3.0.0
HoverBorderDash	List<double>?	null		Gets or sets the length and spacing of dashes when hovered.	3.0.0
HoverBorderDashOffset	double?	null		Offset for line dashes when hovered.	3.0.0
HoverBorderJoinStyle	string	miter		Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'.	3.0.0
HoverBorderWidth	double?	null		The bar border width when hovered (in pixels) when hovered.	3.0.0
Label	string?	null		The label for the dataset which appears in the legend and tooltips.	3.0.0
Order	int	0		The drawing order of dataset. Also affects order for stacking, tooltip and legend.	3.0.0
PointBackgroundColor	List<string>?	null		The fill color for points.	3.0.0
PointBorderColor	List<string>?	null		The border color for points.	3.0.0
PointBorderWidth	List<double>?	null		The width of the point border in pixels.	3.0.0
PointHitRadius	List<double>?	null		The pixel size of the non-displayed point that reacts to mouse events.	3.0.0
PointHoverBackgroundColor	List<string>?	null		Point background color when hovered.	3.0.0
PointHoverBorderColor	List<string>?	null		Point border color when hovered.	3.0.0
PointHoverBorderWidth	List<double>?	null		Border width of point when hovered.	3.0.0
PointHoverRadius	List<double>?	null		The radius of the point when hovered.	3.0.0
PointRadius	List<double>?	null		The radius of the point shape. If set to 0, the point is not rendered.	3.0.0
PointRotation	List<double>?	null		The rotation of the point in degrees.	3.0.0
PointStyle	List<string>?	null		Style of the point. Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style.	3.0.0
SpanGaps	bool?	null		If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.	3.0.0
Tension	double	0		Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.	3.0.0

RadarChartDatasetDataLabels Members

info

RadarChartDatasetDataLabels inherits from the parent class ChartDatasetDataLabels.

Property Name	Type	Default	Required	Description	Added Version
Alignment	Alignment	Alignment.None		Gets or sets the data labels alignment.	3.0.0
Anchor	Anchor	Anchor.None		Gets or sets the data labels anchor.	3.0.0
BorderWidth	double	2		Gets or sets the border width	3.0.0

RadarChartOptions Members

info

RadarChartOptions inherits from the parent class ChartOptions.

Property Name	Type	Default	Required	Description	Added Version
Locale	string?			Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.	3.0.0
MaintainAspectRatio	bool	true		Maintain the original canvas aspect ratio (width / height) when resizing.	3.0.0
Responsive	bool	false		Gets or sets the Responsive.	3.0.0

Examples

Prerequisites

Refer to the getting started guide for setting up charts.

How it works

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

tip

For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.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].ToColor();

        datasetsCount += 1;

        return new RadarChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToRgbaString(),
                BorderColor = c.ToRgbaString(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

}

See the demo here.