New to Telerik UI for Blazor? Download free 30-day trial

How to format the percent in a label for a pie or donut chart


Product Chart for Blazor
Version 4.5.0+ (for older component versions, browse an older version of this page)


When you use templates to customize the appearance of the labels, you may need to implement some application logic there or to implement complex formatting of the numbers.

This article shows how to format the percent in a label for a pie or donut chart to have a desired number of decimals and to be a number between 0 and 100, instead of the default number between 0 and 1 that has many decimal places:

Blazor Pie Chart Formatted Percent


To customize the percentage display, you need to:

  1. Use a Chart label template. Set the label template function name to the Template parameter of ChartSeriesLabels.

  2. Use the percentage field of the JavaScript label template function's argument.

  3. Implement the desired additional rounding/formatting in the JavaScript code.

Format Pie Chart labels as percent

        <ChartSeries Type="ChartSeriesType.Pie"
            <ChartSeriesLabels Visible="true" Template="pieChartLabelTemplate" />

    <ChartTitle Text="Revenue per product" />

    <ChartLegend Position="ChartLegendPosition.Right" />

<!-- Move JavaScript code to a separate JS file in production -->
<script suppress-error="BL9992">
    function pieChartLabelTemplate(context) {
        return context.value + " mln\n" + round(context.percentage * 100, 1) + "%";

    // From
    function round(value, decimals) {
        return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);

@code {
    private List<PieChartModel> PieData = new List<PieChartModel>()
        new PieChartModel
            SegmentName = "Product 1",
            SegmentValue = 1
        new PieChartModel
            SegmentName = "Product 2",
            SegmentValue = 3
        new PieChartModel
            SegmentName = "Product 3",
            SegmentValue = 5

    public class PieChartModel
        public string SegmentName { get; set; }
        public double SegmentValue { get; set; }

See Also

In this article