Localization in Angular Chart

31 Aug 20267 minutes to read

Localization adapts the chart’s static text content (for example, zoom toolbar labels) to different languages and regions. It is achieved by providing a locale-specific translation dictionary through the L10n.load() method and binding the desired locale to the Chart’s locale property.

Importing L10n

L10n is exported from the base package. Import it in the file where you register translations:

import { L10n } from '@syncfusion/ej2-base';

L10n ships with @syncfusion/ej2-base, which is a dependency of @syncfusion/ej2-angular-charts, so no extra install step is required.

Loading Translations

Call L10n.load() once at application startup, before any chart is rendered and before bootstrapApplication(...) runs in main.ts. The payload is a locale dictionary whose top-level key is the locale code (for example, ar-AR) and whose nested key must be the module name (chart). Each entry inside is a camelCase string key mapped to the translated value. Keys left out of the dictionary fall back to the default English text shown in the table below:

L10n.load({
    'ar-AR': {
        'chart': {
            Zoom: 'زوم',
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Reset: 'إعادة تعيين',
            ResetZoom: 'إعادة تعيين التكبير',
            Pan: 'تحريك'
        }
    }
});

Bind the matching locale on the Chart component so the registered dictionary is applied:

<ejs-chart locale="ar-AR" ...></ejs-chart>

The following table lists the default locale keys supported by the Chart. The “Default English text” column shows the value rendered when no translation is provided.

Locale key Default English text
Zoom Zoom
ZoomIn ZoomIn
ZoomOut ZoomOut
Reset Reset
Pan Pan
ResetZoom Reset Zoom

For more information about localization, see the localization guide: Localization.

RTL Support

For right-to-left languages such as Arabic, also enable RTL rendering on the chart so the toolbar and layout flow correctly. Set enableRtl to true on the Chart component (typically in ngOnInit or as a class initializer):

@Component({ /* ... */ })
export class AppComponent implements OnInit {
    public enableRtl = true;
    // ...
}

Code Example

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, AreaSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, ZoomService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'ar-AR': {
        'chart': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'تحريك',
            Reset: 'إعادة تعيين',
            ResetZoom: 'إعادة تعيين التكبير'
        },
    }
});

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, AreaSeriesService, LegendService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' locale='ar-AR' [zoomSettings]='zoom'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' ></e-series>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y1' name='Product Y'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;

    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    public zoom?: Object;
    ngOnInit(): void {
        this.chartData = [
                { x: 1900, y: 4, y1: 2.6, y2: 2.8 }, { x: 1920, y: 3.0, y1: 2.8, y2: 2.5 },
                { x: 1940, y: 3.8, y1: 2.6, y2: 2.8 }, { x: 1960, y: 3.4, y1: 3, y2: 3.2 },
                { x: 1980, y: 3.2, y1: 3.6, y2: 2.9 }, { x: 2000, y: 3.9, y1: 3, y2: 2 }
        ];
        this.primaryXAxis = {
            title: 'Year',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
           title: 'Sales Amount in Millions',
        };
        this.zoom = {
            enableMouseWheelZooming: true,
            enableDeferredZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true,
            toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
        };
        this.title = 'Average Sales Comparison';
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

  • Translations are not applied — Confirm L10n.load(...) is called before the chart is created and that the locale property on the chart matches the dictionary key (e.g. ar-AR).
  • Some keys remain in English — Verify the module key is exactly 'chart' and that the inner keys are camelCase strings (e.g. ZoomIn, not zoomIn/zoom_in).
  • Layout does not flip for Arabic/Hebrew — Set enableRtl=true on the chart in addition to the locale.

See Also