Blazor Polar Area Chart
A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
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
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.
<PolarAreaChart @ref="polarAreaChart" Width="600" />
<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
</div>
@code {
private PolarAreaChart polarAreaChart = default!;
private PolarAreaChartOptions polarAreaChartOptions = default!;
private ChartData chartData = default!;
private string[]? chartColors;
private int datasetsCount = 0;
private int dataLabelsCount = 0;
private Random random = new();
protected override void OnInitialized()
{
chartColors = ColorUtility.CategoricalTwelveColors;
chartData = new ChartData { Labels = GetDefaultDataLabels(5), Datasets = GetDefaultDataSets(1) };
polarAreaChartOptions = new();
polarAreaChartOptions.Responsive = true;
polarAreaChartOptions.Plugins.Title!.Text = "2022 - Sales";
polarAreaChartOptions.Plugins.Title.Display = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);
}
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 PolarAreaChartDataset polarAreaChartDataset
&& polarAreaChartDataset is not null
&& polarAreaChartDataset.Data is not null)
{
var count = polarAreaChartDataset.Data.Count;
var newData = new List<double?>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(0, 100));
}
var backgroundColors = new List<string>();
for (var index = 0; index < count; index++)
{
backgroundColors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA
}
polarAreaChartDataset.Data = newData;
polarAreaChartDataset.BackgroundColor = backgroundColors;
newDatasets.Add(polarAreaChartDataset);
}
}
chartData.Datasets = newDatasets;
await polarAreaChart.UpdateAsync(chartData, polarAreaChartOptions);
}
private async Task AddDatasetAsync()
{
if (chartData is null || chartData.Datasets is null) return;
var chartDataset = GetRandomPolarAreaChartDataset();
chartData = await polarAreaChart.AddDatasetAsync(chartData, chartDataset, polarAreaChartOptions);
}
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 PolarAreaChartDataset polarAreaChartDataset)
data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToColor().ToRgbaString(0.5), null));
}
chartData = await polarAreaChart.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() => $"Product {dataLabelsCount}";
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
{
var datasets = new List<IChartDataset>();
for (var index = 0; index < numberOfDatasets; index++)
{
datasets.Add(GetRandomPolarAreaChartDataset());
}
return datasets;
}
private PolarAreaChartDataset GetRandomPolarAreaChartDataset()
{
datasetsCount += 1;
return new()
{
Label = $"Team {datasetsCount}",
Data = GetRandomData(),
BackgroundColor = GetRandomBackgroundColors()
};
}
private List<double?> GetRandomData()
{
var data = new List<double?>();
for (var index = 0; index < dataLabelsCount; index++)
{
data.Add(random.Next(0, 100));
}
return data;
}
private List<string> GetRandomBackgroundColors()
{
var colors = new List<string>();
for (var index = 0; index < dataLabelsCount; index++)
{
colors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA
}
return colors;
}
private List<string> GetRandomBorderColors()
{
var colors = new List<string>();
for (var index = 0; index < dataLabelsCount; index++)
{
colors.Add(chartColors![index].ToColor().ToRgbString()); // RGB
}
return colors;
}
#endregion Data Preparation
}