How do you add text at the center of a doughnut chart?

[Vruttant Balde]

Describe your question

How do you add text at the center of a doughnut chart?

Which Blazor project type is your question related to?

• Client-Side

Which charts is this question related to?

• Doughnut Chart

JavaScript equivalent

{       
        ...
        var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
        ...
}

Additional context

https://jsfiddle.net/cmyker/ooxdL2vj/

[Daan]

This response might be kinda late since I just recently got into ChartJS, my apologies.

I kinda had the same problem and was searching for a solution around here. At the end, I have found a solution.

I solved this by adding a negative padding on the Title (which puts the Title of the chart in the center), maybe this works for you as well.

Example:

CutoutPercentage = 95,
and
Title = new OptionsTitle { Display = true, Text = "title", Padding = -130, FontSize = 40, }

Cheers

[Vruttant Balde]

Hey, thanks for your reply! I actually asked this when I was interning at a company last year haha. Good to know that you were able to solve it. As far as I remember I had used CSS (absolute) positioning to center a regular span tag over the component. That worked since our app's usage was limited to laptop devices.