Internationalization in Angular Chart

31 Aug 20267 minutes to read

Chart supports internationalization for the following elements:

Data Label — formatted via the marker.dataLabel.format property.
Axis Label — formatted via the axis labelFormat property (for example, on primaryXAxis / primaryYAxis).
Tooltip — formatted via the tooltip.format property.

For more information about number and date formatting, see the EJ2 globalization guide: Internationalization guide.

Globalization

Globalization is the process of designing and developing a component that works in different cultures/locales. Use the internationalization library to localize numbers, dates, and times in the Chart component (for example, with the axis labelFormat property or the data label format).

Prerequisites

For non-en-US cultures, load the CLDR data, register the culture, and set the currency code once during application initialization, before any chart renders. Place these calls at the top of main.ts (or in a single bootstrap module imported before the chart):

import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
import * as denumbers from 'cldr-data/main/de/numbers.json';
import * as detimeZoneNames from 'cldr-data/main/de/timeZoneNames.json';
import * as decurrencies from 'cldr-data/main/de/currencies.json';
import * as degregorian from 'cldr-data/main/de/ca-gregorian.json';

loadCldr(
    denumbers, detimeZoneNames, decurrencies, degregorian,
    numberingSystems
);
setCulture('de');
setCurrencyCode('EUR');

If you don’t need to change the culture from en-US, the bundled sample skips loadCldr/setCulture and calls only setCurrencyCode('EUR'). The axis will still render EUR because labelFormat: 'c' reads the globalized currency code set by setCurrencyCode. Add loadCldr/setCulture only when you need localized decimal/grouping separators or non-English culture output.

Numeric Format

Currency Format

The example below applies the EUR currency format to the y-axis labels by calling setCurrencyCode('EUR') and setting primaryYAxis.labelFormat to 'c'. To extend the same format to data labels and tooltips, see Customizing Tooltip and Data Label.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, DataLabelService, ColumnSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { setCurrencyCode } from '@syncfusion/ej2-base';
setCurrencyCode('EUR');

@Component({
imports: [
         ChartModule
    ],

providers: [ LegendService, TooltipService, DataLabelService, ColumnSeriesService, DateTimeService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'[tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='x' yName='y' name='Product X' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='Column' xName='x' yName='y1' name='Product Y ' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public tooltip?: Object;
    public marker?: Object;
    public primaryYAxis?: 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',
           labelFormat: 'c'
        };
        this.tooltip = {
            enable: true, format: '${series.name} <br>${point.x} : ${point.y}'
        };
        this.marker = {
            dataLabel: {
                visible: true
            }
        };
        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));

Date Format

To globalize axis labels to a culture-aware date format, set the axis valueType to DateTime and use a culture-aware labelFormat:

this.primaryXAxis = {
    title: 'Year',
    valueType: 'DateTime',
    labelFormat: 'd MMM yyyy'
};

This requires loadCldr and setCulture to be configured as shown in Prerequisites. To control whether the thousand separator is rendered, set the chart-level useGroupingSeparator property (default false):

this.useGroupingSeparator = true;

The bundled snippet only currency-formats the axis. To apply the same format to data labels and tooltips, add format: 'c2' to the data label and an inline currency format token (for example, ${point.y:c2}) to the tooltip format string. The :c2 token uses the currency code set by setCurrencyCode(...) and renders two decimal places:

this.tooltip = {
    enable: true,
    format: '${series.name} <br>${point.x} : ${point.y:c2}'
};
this.marker = {
    dataLabel: {
        visible: true,
        format: 'c2'
    }
};

Troubleshooting

Axis/tooltip/data-label still display in en-US after setting currency code — setCurrencyCode('EUR') updates the global currency code, but en-US formatting (decimal point, thousand separator) is applied by default. Use labelFormat: 'c' on the axis (the bundled sample) and ${point.y:c2} (for tooltips) / format: 'c2' (for data labels) so the globalized currency symbol and culture-aware number formatting are rendered. To use a non-en-US culture for the formatter, also call loadCldr(...) and setCulture(...) before the chart is created.
Currency symbol missing — Confirm setCurrencyCode('EUR') is being called before the chart is created (for example, in main.ts rather than inside the component constructor). When using a non-en-US culture, also ensure the appropriate CLDR currencies JSON was passed to loadCldr.
Grouping separator (,) not visible — Verify that useGroupingSeparator is set to true on the chart (default is false).

Search docs

Ask Syncfusion AI Assistant