Globalization in Blazor Circular Gauge Component
4 Apr 20231 minute to read
The internationalization library provides support for formatting and parsing the number using the official Unicode CLDR JSON data and also provides the loadCldr
method to load the culture-specific CLDR JSON data. The Circular Gauge component comes with built-in internationalization support to adapt to different cultures.
By default, all the Blazor components are specific to the English culture (‘en-US’). If you need a different culture, follow the given steps:
Install the CLDR-Data package using the following command (it installs the CLDR JSON data).
npm install cldr-data --save
To know more about CLDR-Data, refer to CLDR-Data.
After the package has been installed, you can find the culture-specific JSON data under the following location: /node_modules/cldr-data/main
, and then copy the required cldr-data
file into the wwwroot/cldr-data
folder.
Circular Gauge provides internationalization support for below elements.
- Axis label.
- Tooltip.
In the below example, axis labels are globalized to EUR.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.CircularGauge
@using Microsoft.JSInterop;
<SfCircularGauge>
<CircularGaugeAxes>
<CircularGaugeAxis>
<CircularGaugeAxisLabelStyle Format='c' Position="Position.Inside">
</CircularGaugeAxisLabelStyle>
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
@code {
[Inject]
protected IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender()
{
this.JsRuntime.Sf().LoadCldrData(new string[] { "wwwroot/cldr-data/de/currencies.json", "wwwroot/cldr-data/de/numbers.json" }).SetCulture("de").SetCurrencyCode("EUR");
}
}