PolarArea Chart
Explore interactive Blazor Polar Area Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Polar Area Chart component.
Chart setup #
How it works #
The Polar Area Chart component visualizes each data value as a segment with equal angles but varying radius, making it ideal for comparing values across categories in a circular layout.
How to use:
This demo demonstrates how to set up a Polar Area Chart, bind your data, and interactively update the chart to fit your application's needs.
How to use:
- Add the
PolarAreaChartcomponent to your page and set its dimensions (e.g.,Width="600"). - Prepare your chart data by specifying
Labelsfor each category and one or moreDatasetswith values and background colors. - Configure chart options such as
ResponsiveandTitleusing thePolarAreaChartOptionsobject. - Initialize the chart in
OnAfterRenderAsyncby callingpolarAreaChart.InitializeAsync(chartData, polarAreaChartOptions). - Use the demo's interactive buttons to randomize data, add datasets, or add new data points dynamically and see the chart update in real time.
- Refer to the demo code below for practical examples of data preparation, dynamic updates, and chart customization.
<PolarAreaChart @ref="polarAreaChart" Width="600" />
<div class="mt-5">
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="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 = ChartJsColorUtility.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(ChartJsColorExtensions.ToRgbaString(ChartJsColorExtensions.ToColor(chartColors![index]), 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), ChartJsColorExtensions.ToRgbaString(ChartJsColorExtensions.ToColor(chartColors![dataLabelsCount - 1]), 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(ChartJsColorExtensions.ToRgbaString(ChartJsColorExtensions.ToColor(chartColors![index]), 0.5)); // RGBA
}
return colors;
}
private List<string> GetRandomBorderColors()
{
var colors = new List<string>();
for (var index = 0; index < dataLabelsCount; index++)
{
colors.Add(ChartJsColorExtensions.ToRgbString(ChartJsColorExtensions.ToColor(chartColors![index]))); // RGB
}
return colors;
}
#endregion Data Preparation
}