Globalization

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 Linear 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.

Linear Gauge provides internationalization support for below gauge elements.

• Axis label
• Tooltip

You can globalize number in Linear Gauge component using LoadCldrData, SetCulture and SetCurrencyCode methods.

@using Microsoft.JSInterop
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Width="650" Height="300" Format="c">
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeAxisLabelStyle Format="c2">
                <LinearGaugeAxisLabelFont Color="red"></LinearGaugeAxisLabelFont>
            </LinearGaugeAxisLabelStyle>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender()
    {
        this.JsRuntime.Ejs().LoadCldrData(new string[] { "wwwroot/cldr-data/de/currencies.json", "wwwroot/cldr-data/de/numbers.json" }).SetCulture("de").SetCurrencyCode("EUR");
    }
}