Chartjs-How to import a doughnut Chart using Chart JS for Blazor?

0👍

Quoting Doughnut and Pie Charts docs

Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value – their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and ‘50%’ for doughnuts.

Changes in your code:

protected override void OnInitialized()
{
    _config = new PieConfig
    {
        Options = new PieOptions
        {
            CutoutPercentage = 50, //<--- HERE!
            Responsive = true,
            Title = new OptionsTitle
            {                    
                Display = true,
                Text = "ChartJs.Blazor Pie Chart"
            }
        }
    };

Result:

enter image description here

Leave a comment