Blazor Polar Area Chart

BlazorExpress.ChartJS 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.

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].ToChartColor().ToChartRgbaString(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].ToChartColor().ToChartRgbaString(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].ToChartColor().ToChartRgbaString(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].ToChartColor().ToChartRgbString()); // RGB
        }

        return colors;
    }

    #endregion  Data Preparation
}

Click event #

Set the OnClick callback to react when a polar-area segment is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value.

<PolarAreaChart @ref="polarAreaChart" 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 PolarAreaChart polarAreaChart = default!;
    private PolarAreaChartOptions polarAreaChartOptions = default!;
    private ChartData chartData = default!;
    private ChartClickEventArgs? selectedChartItem;

    protected override void OnInitialized()
    {
        chartData = new ChartData
        {
            Labels = new List<string> { "North", "South", "East", "West" },
            Datasets = new List<IChartDataset>
            {
                new PolarAreaChartDataset
                {
                    Label = "Sales",
                    Data = new List<double?> { 35, 55, 40, 25 },
                    BackgroundColor = new List<string>
                    {
                        "rgba(255, 99, 132, 0.5)",
                        "rgba(54, 162, 235, 0.5)",
                        "rgba(255, 206, 86, 0.5)",
                        "rgba(75, 192, 192, 0.5)",
                    },
                },
            },
        };

        polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);

        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 Polar Area Chart

How it works #

Click event #

Chart Components — Dedicated Library

Links

Guides

Community

Other Libraries