Localization in React Chart

25 Aug 202610 minutes to read

Use the L10n class from @syncfusion/ej2-base to translate the Chart’s default text content. Static text used by chart features (for example, zoom toolbar labels) can be translated by providing a locale value and a translation object, and setting the locale property on the Chart to match the loaded culture. The keys listed below are exposed by the Chart resource file (typically src/chart/locale.json); supply a translated value for each key in your translation object.

Note: The zoom toolbar must be enabled via zoomSettings.toolbarItems for the localized labels (Zoom, ZoomIn, ZoomOut, Reset, Pan, ResetZoom) to appear. Missing keys fall back to the default English text.

Locale key Default text
Zoom Zoom
ZoomIn Zoom In
ZoomOut Zoom Out
Reset Reset
Pan Pan
ResetZoom Reset Zoom

Prerequisites

Install the base package that provides the L10n class:

npm install @syncfusion/ej2-base --save

Loading the translation object

Use the load function of the L10n class to load a translation object into the application. The call must be made before the Chart renders, for example in the application’s entry point or in a parent component above the Chart.

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

// Load translations for a specific culture.
// `path` can be a URL to a JSON file or an inline object passed as the second argument.
L10n.load({
    'fr-FR': {
        'chart': {
            Zoom: 'Zoom',
            ZoomIn: 'Zoom avant',
            ZoomOut: 'Zoom arrière',
            Reset: 'Réinitialiser',
            Pan: 'Déplacer',
            ResetZoom: 'Réinitialiser le zoom'
        }
    }
});

Then set the matching locale on the Chart component to apply the translations:

<ChartComponent id="charts" locale="fr-FR" ...>

If a key is missing from the translation object, the Chart falls back to the default English text. For cultures other than en-US, also call loadCldr and setCulture as described in the Internationalization topic.

Using pre-built locale files

Instead of authoring a translation object by hand, you can install the official locale package and load a ready-made JSON for many languages:

npm install @syncfusion/ej2-locale
import { L10n } from '@syncfusion/ej2-base';
import * as frLocale from '@syncfusion/ej2-locale/src/fr.json';

L10n.load({ 'fr-FR': frLocale });

Additional pre-built locale JSON files are available in the ej2-locale GitHub repository.

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

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Zoom, DataLabel } from '@syncfusion/ej2-react-charts';
import { L10n } from '@syncfusion/ej2-base';
import { data } from './datasource';
L10n.load({
    'ar-AR': {
        'chart': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'مقلاة',
            Reset: 'إعادة تعيين',
        },
    }
});
function App() {
    const primaryxAxis = { edgeLabelPlacement: 'Shift', title: 'Years' };
    const primaryyAxis = { title: 'Sales Amount in Millions' };
    const zoomsettings = {
        enableMouseWheelZooming: true, enablePinchZooming: true,
        enableSelectionZooming: true
    };
    const marker = { dataLabel: { visible: true } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison' zoomSettings={zoomsettings} locale='ar-AR'>
      <Inject services={[ColumnSeries, Legend, Zoom, DataLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Column' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Product Y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
    ColumnSeries, Legend, Zoom, DataLabel,ZoomSettingsModel,AxisModel
} from '@syncfusion/ej2-react-charts';
import { L10n } from '@syncfusion/ej2-base';
import { data } from './datasource';
L10n.load({
    'ar-AR': {
        'chart': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'مقلاة',
            Reset: 'إعادة تعيين',
        },
    }
});
function App() {

  const primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' };
  const primaryyAxis: AxisModel = { title: 'Sales Amount in Millions' };
  const zoomsettings: ZoomSettingsModel = {
    enableMouseWheelZooming: true, enablePinchZooming: true,
    enableSelectionZooming: true
  };
  const marker = { dataLabel: { visible: true } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'
      zoomSettings={zoomsettings}
      locale='ar-AR'>
      <Inject services={[ColumnSeries, Legend, Zoom, DataLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Column'
          marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Product Y' type='Column'
          marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];