Adding Datalabels to Blazor Bootstrap PieChart

Question

I am following the Blazor Bootstrap demo for creating a Pie Chart: https://docs.blazorbootstrap.com/data-visualization/pie-chart

I can successfully make regular pie charts, however, I am unable to add DataLabels to each slice in the chart. I have included the following lines:

await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });

...and

dataset1.Datalabels.Anchor = "end";

...to add the datalabels (as indicated in the tutorial) but I am running into the error: Microsoft.JSInterop.JSException: ChartDataLabels is not defined

I have followed the Bootstrap tutorials to a tee and have tried directly copying and pasting the code from the demo with no success.

If anyone knows how to add datalabels to Blazor Bootstrap Pie Charts, any help would be much appreciated!

Thanks.

Answer 1

This is likely a bit late, but you can set your labels direclty in the ChartData object.

For example :

List<double> data = new List<double>();
List<string> labels = new List<string>();

foreach(var countryGroup in _db.Participants.GroupBy(a=>a.Country))
{
    data.Add(countryGroup.Count());
    labels.Add(countryGroup.Key);
}        

PieChartDataset dataset = new PieChartDataset() { Data = data };

ChartData chartData = new ChartData();
chartData.Datasets = new List<IChartDataset>() { dataset };    
chartData.Labels = labels;