Search results

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");
    }
}

Linear Gauge with Internationalization Sample