Localization in Blazor Chart component

Localization library allows to localize the default text content of Chart. In Chart component, it has the static text on some features(like zooming toolbars) and this can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.

Locale key words	Text to display
Zoom	Zoom
ZoomIn	ZoomIn
ZoomOut	ZoomOut
Reset	Reset
Pan	Pan
ResetZoom	Reset Zoom

To load translation object in an application use load function of L10n class.

localization.razor

@using Syncfusion.Blazor.Charts

<SfChart Id="column" Title="Olympic Medal Counts - RIO" @ref="@chart">
    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
    </ChartPrimaryXAxis>
    <ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true"></ChartZoomSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Name="Gold" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                    <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
        <ChartSeries dataSource="@MedalDetails" XName="X" YName="Y1" Name="Silver" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                    <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y2" Name="Bronze" Type="ChartSeriesType.Column">
            <ChartMarker>
                <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                    <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                </ChartDataLabel>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>
@code{
    [Inject] protected IJSRuntime JsRuntime { get; set; }
    SfChart chart;
    protected override void OnAfterRender()
    {
        this.JsRuntime.Sf().SetCulture("de-DE").SetCurrencyCode("EUR").LoadLocaleData("wwwroot/locale.json");
    }
    public class ChartData
    {
        public string X;
        public double Y;
        public double Y1;
        public double Y2;
    }
    List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData { X= "USA", Y= 46, Y1= 37, Y2= 38 },
    new ChartData { X= "GBR", Y= 27, Y1= 23, Y2= 17 },
    new ChartData { X= "CHN", Y= 26, Y1= 18, Y2= 26 }
};

}

Localization

Localization in Blazor Chart component

See Also