Localize numeric labels in the Chart
Environment
| Product | Chart for Blazor |
| Version | 4.5.0+ (for older versions, browse and older version of this page) |
Description
How to localize the labels of a Telerik Blazor Chart?
I want to make my Chart labels 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 render more information in the label, you can utilize the Template parameter of the <ChartSeriesLabels> tag. In a JavaScript file, implement the desired number formatting by using the toLocaleString JavaScript method. Below is a sample implementation.
Use a Chart label template.
Implement the desired number formatting in a JavaScript function. For example, use the
toLocaleStringmethod.Call the custom formatting function from the template function and pass the needed arguments to it. The template function must return the string you want to show in the template.
Localize numeric labels in the Chart using the Template parameter
<TelerikChart>
<ChartLegend Visible="true"
Position="ChartLegendPosition.Top"></ChartLegend>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut"
Data="@ChartData"
Field="@nameof(ChartModel.Value)"
CategoryField="@nameof(ChartModel.XValue)"
ColorField="@nameof(ChartModel.BackgroundColor)"
StartAngle="270">
<ChartSeriesLabels Visible="true"
Position="ChartSeriesLabelsPosition.OutsideEnd"
Template="chartSeriesLabelTemplate">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
<!-- Move JavaScript functions to a separate JS file in production -->
<script suppress-error="BL9992">
var cultureInfo = "@System.Threading.Thread.CurrentThread.CurrentUICulture";
function chartSeriesLabelTemplate(context) {
return "localized label: " + formatNumberLocale(context.value, cultureInfo, 2);
}
function formatNumberLocale(number, locale, decimals){
return number.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}
</script>
@code {
private List<ChartModel> ChartData = new List<ChartModel>()
{
new ChartModel { XValue = "Item", Value = 1.1223523525m, BackgroundColor = "red" },
new ChartModel { XValue = "Item 2", Value = 2.542342424m, BackgroundColor = "green" },
new ChartModel { XValue = "Item 3", Value = 3.141592653589793238m, BackgroundColor = "blue" }
};
public class ChartModel
{
public string XValue { get; set; }
public decimal Value { get; set; }
public string BackgroundColor { get; set; }
}
}