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
Use a custom template
Implement the desired number formatting function in a JavaScript file (in the example below, we will call it
template-helpers.jsand it resides in thewwwrootfolder). This can be achieved by using the toLocaleString method.Reference that file in your root component (
_Host.cshtmlfor a server-side app, orindex.htmlfor a client-side app).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>