Localization

2 Aug 20212 minutes to read

The Sparkline Charts component supports localization. The default culture for localization is en-US. Change the culture using the LoadCldrData and the setCulture method.

Tooltip format

The Sparkline Charts tooltip supports localization. The following code sample shows the tooltip text with currency format based on culture.

<SfSparkline DataSource="@Numbers"
              Type="SparklineType.Line"
              Fill="#b2cfff"
              LineWidth="3"
              UseGroupingSeparator= "true"
              Height="200px" Width="350px"
              Format = "c0">
                <SparklineContainerArea>
                    <SparklineContainerAreaBorder Color="#033e96" Width="2"></SparklineContainerAreaBorder>
                </SparklineContainerArea>
                <SparklinePadding Left='20' Right='20' Bottom='20' Top='20'></SparklinePadding>
                <SparklineTooltipSettings  Visible='true'></SparklineTooltipSettings>
</SfSparkline>

@code {
    int[] Numbers={30000, 60000, 40000, 10000, 30000, 20000, 50000};
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender() {
        this.JsRuntime.Ejs().LoadCldrData(new string[]{"ca-gregorian.json",
        "currencies.json","numbers.json","timeZoneNames.json"}).SetCulture("de");
    }
}

Rtl

If the EnableRtl property is set to true, then the Sparkline Charts will be rendered from right-to-left direction.

The following example shows the Sparkline Charts render from “Right-to-left”.

@using Microsoft.JSInterop;

<SfSparkline DataSource="@Numbers"
              Type="SparklineType.Line"
               Height="150px" Width="150px">
</SfSparkline>

@code {
    int[] Numbers={0, 6, 4, 1, 3, 2, 5};
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender() {
        this.JsRuntime.Ejs().EnableRtl(true);
    }
}