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

Localize numeric labels in the Chart

Environment

Product Chart for Blazor

Description

I am having a Chart and I would like my labels to be localization aware.

Solution

There are two different approaches:

Using the Format Parameter

If you need to use only the value of the series item, and a single line of text, you can use the Format parameter of the <ChartSeriesLabels> tag. It takes a standard numeric format strings and is localization aware.

Using the Template Parameter

If you want to expose more information, for example, some multi line text, HTML elements, etc., you can utilize the Template parameter, which is exposed from the <ChartSeriesLabels> tag. In a JavaScript file implement the desired number formatting by using the toLocaleString JavaScript method. A sample implementation can be seen in the example below.

Step by step explanation

  1. Use a custom template

  2. Implement the desired number formatting function in a JavaScript file (in the example below, we will call it template-helpers.js and it resides in the wwwroot folder). This can be achieved by using the toLocaleString method.

  3. Reference that file in your root component (_Host.cshtml for a server-side app, or index.html for a client-side app).

  4. Call the custom formatting function from the template and pass the needed arguments to it. It must return the string you want shown in the template.

Localize numeric labels in the Chart using the Template parameter

@* This example shows how to localize numeric labels in the Chart using the Template parameter *@

@*used to get the current culture*@
@using System.Threading

<TelerikChart>

    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Donut"
                     Data="@this.ChartData"
                     Field="@nameof(Data.Value)"
                     CategoryField="@nameof(Data.XValue)"
                     ColorField="@nameof(Data.BackgroundColor)"
                     StartAngle="270">
            <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Template="@LocalizedTemplateString">
            </ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public string LocalizedTemplateString => GetFormattedNumericValue();

    protected static string GetFormattedNumericValue()
    {
        var cultureInfo = Thread.CurrentThread.CurrentUICulture; //get the current culture
        return $"value of the label: #= formatNumberLocale(value, '{cultureInfo.Name}', 2)#";
    }

    public class Data
    {
        public string XValue { get; set; }
        public decimal Value { get; set; }
        public string BackgroundColor { get; set; }
    }

    public List<Data> ChartData = new List<Data>()
    {
        new Data { XValue = "Item", Value = 1.1223523525m, BackgroundColor = "red" },
        new Data { XValue = "Item 2", Value = 2.542342424m, BackgroundColor = "green" },
        new Data {XValue = "Item 3", Value = 3.141592653589793238m, BackgroundColor = "blue" }
    };
}
function formatNumberLocale(number, locale, decimals){
    return number.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}
<head>
    <!-- there may be other content here -->

    <script src="template-helpers.js"></script>

    <!-- there may be other content here -->
</head>

See Also

In this article
Not finding the help you need? Improve this article