Blazor Pie Chart

A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.

Parameters

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

Methods

Name	Return type	Description	Added / Modified Version
AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)	`Task<ChartData>`	Adds data to chart.	1.10.0
AddDataAsync(ChartData chartData, string dataLabel, `List<IChartDatasetData>` data)	`Task<ChartData>`	Adds dataset to chart.	1.10.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.	1.0.0
ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px)	Task	Resize the chart.	1.0.0
UpdateAsync(ChartData chartData, IChartOptions chartOptions)	Task	Update the chart.	1.0.0

ChartData Members

Property Name	Type	Default	Required	Description	Added / Modified Version
Datasets	`List<IChartDataset>?`	null	✔️	Gets or sets the Datasets.	1.0.0
Labels	`List<string>?`	null	✔️	Gets or sets the Labels.	1.0.0

PieChartDataset Members

info

PieChartDataset implements IChartDataset and inherits from the parent class ChartDataset.

Property Name	Type	Default	Required	Description	Added / Modified Version
BackgroundColor	`List<string>?`	null		Arc background color.	1.0.0
BorderAlign	`List<string>?`	null		Supported values are 'center' and 'inner'. When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap.	3.0.0
BorderColor	`List<string>?`	null		Arc border color.	1.0.0
BorderDash	`List<double>`	null		Arc border length and spacing of dashes.	3.0.0
BorderDashOffset	double	0.0		Arc border offset for line dashes.	3.0.0
BorderJoinStyle	`List<string>?`	null		Arc border join style. Supported values are 'round', 'bevel', 'miter'.	3.0.0
BorderRadius	`List<double>?`	null		It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight).	3.0.0
BorderWidth	`List<double>?`	null		Arc border width (in pixels).	1.0.0
Circumference	double?	null		Per-dataset override for the sweep that the arcs cover.	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.	1.0.0
Datalabels	`PieChartDatasetDataLabels`			Get or sets the data labels
Hidden	bool	false		Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.	1.0.0
HoverBackgroundColor	`List<string>?`	null		Arc background color when hovered.	1.0.0
HoverBorderColor	`List<string>?`	null		Arc border color when hovered.	1.0.0
HoverBorderDash	`List<double>?`	null		Arc border length and spacing of dashes when hovered.	3.0.0
HoverBorderDashOffset	`double?`	null		Arc border offset for line dashes when hovered.	3.0.0
HoverBorderJoinStyle	`List<string>?`	null		Arc border join style when hovered. Supported values are 'round', 'bevel', 'miter'.	3.0.0
HoverBorderWidth	`List<double>?`	null		Arc border width when hovered (in pixels).	1.0.0
HoverOffset	`List<double>?`	null		Arc offset when hovered (in pixels).	3.0.0
Offset	`List<double>?`	null		Arc offset (in pixels).	3.0.0
Order	int	0		The drawing order of dataset. Also affects order for stacking, tooltip and legend.	3.0.0
Label	`string?`	null		The label for the dataset which appears in the legend and tooltips.	3.0.0
Rotation	`double?`	null		Per-dataset override for the starting angle to draw arcs from.	3.0.0
Spacing	double	0		Fixed arc offset (in pixels). Similar to `Offset` but applies to all arcs.	3.0.0
Weight	double	1		The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.	3.0.0

PieChartDatasetDataLabels Members

info

PieChartDatasetDataLabels inherits from the parent class ChartDatasetDataLabels.

Property Name	Type	Default	Description	Added / Modified 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

PieChartOptions Members

info

PieChartOptions inherits from the parent class ChartOptions.

Property Name	Type	Default	Description	Added / Modified Version
Locale	`string?`		Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.	1.10.0
MaintainAspectRatio	bool	true	Maintain the original canvas aspect ratio (width / height) when resizing.	3.0.0
Plugins	`PieChartPlugins`		Gets or sets the Plugins.	1.10.2
Responsive	bool	false	Resizes the chart canvas when its container does.	1.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.

Blazor Bootstrap: Pie Chart Component - How it works

<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>

@code {
    private PieChart pieChart = default!;
    private PieChartOptions pieChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };

        pieChartOptions = new();
        pieChartOptions.Responsive = true;
        pieChartOptions.Plugins.Title.Text = "2022 - Sales";
        pieChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await pieChart.InitializeAsync(chartData, pieChartOptions);
        }
        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 PieChartDataset pieChartDataset
                && pieChartDataset is not null
                && pieChartDataset.Data is not null)
            {
                var count = pieChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                pieChartDataset.Data = newData;
                newDatasets.Add(pieChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await pieChart.UpdateAsync(chartData, pieChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomPieChartDataset();
        chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset)
                data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
        }

        chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomPieChartDataset());
        }

        return datasets;
    }

    private PieChartDataset GetRandomPieChartDataset()
    {
        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(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

Data labels

<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>

@code {
    private PieChart pieChart = default!;
    private PieChartOptions pieChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };

        pieChartOptions = new();
        pieChartOptions.Responsive = true;
        pieChartOptions.Plugins.Title.Text = "2022 - Sales";
        pieChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        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 PieChartDataset pieChartDataset
                && pieChartDataset is not null
                && pieChartDataset.Data is not null)
            {
                var count = pieChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                pieChartDataset.Data = newData;
                newDatasets.Add(pieChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await pieChart.UpdateAsync(chartData, pieChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset)
                data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
        }

        chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            var dataset = GetRandomPieChartDataset();

            if (index == 0)
                dataset.Datalabels.Anchor = "end";
            else if (index == numberOfDatasets - 1)
                dataset.Datalabels.Anchor = "end";
            else
                dataset.Datalabels.Anchor = "center";

            datasets.Add(dataset);
        }

        return datasets;
    }

    private PieChartDataset GetRandomPieChartDataset()
    {
        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(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

Change legend position

This sample demonstrates how to change the position of the chart legend.

<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="PositionTopAsync"> Position: top </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="PositionRightAsync"> Position: right </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="PositionBottomAsync"> Position: bottom </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="PositionLeftAsync"> Position: left </Button>

@code {
    private PieChart pieChart = default!;
    private PieChartOptions pieChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };

        pieChartOptions = new();
        pieChartOptions.Responsive = true;
        pieChartOptions.Plugins.Title.Text = "2022 - Sales";
        pieChartOptions.Plugins.Title.Display = true;

        pieChartOptions.Plugins.Legend.Position = "right";
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await pieChart.InitializeAsync(chartData, pieChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task PositionTopAsync() => await UpdatePositionAsync("top");
    private async Task PositionRightAsync() => await UpdatePositionAsync("right");
    private async Task PositionBottomAsync() => await UpdatePositionAsync("bottom");
    private async Task PositionLeftAsync() => await UpdatePositionAsync("left");

    private async Task UpdatePositionAsync(string position)
    {
        pieChartOptions.Plugins.Legend.Position = position;
        await pieChart.UpdateAsync(chartData, pieChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomPieChartDataset());
        }

        return datasets;
    }

    private PieChartDataset GetRandomPieChartDataset()
    {
        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(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

Blazor Pie Chart

Parameters​

Methods​

ChartData Members​

PieChartDataset Members​

PieChartDatasetDataLabels Members​

PieChartOptions Members​

Examples​

Prerequisites​

How it works​

Data labels​

Change legend position​

Parameters

Methods

ChartData Members

PieChartDataset Members

PieChartDatasetDataLabels Members

PieChartOptions Members

Examples

Prerequisites

How it works

Data labels

Change legend position