Internationalization in React Chart

25 Aug 20267 minutes to read

Chart provides support for internationalization for the following elements:

  • Data label
  • Axis label
  • Tooltip

For more information about number and date formatting, see the internationalization guide: internationalization.

Note: The en-US locale and USD currency code are set as defaults. To use another culture, call loadCldr (and optionally setCulture) before the Chart renders. The currency used by the 'c' format is set via setCurrencyCode.

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, by using the axis labelFormat property. You must call setCurrencyCode (and loadCldr for non en-US cultures) before the Chart mounts.

Numeric Format

The example below globalize axis, point, and tooltip labels to the EUR currency format. To use a culture other than en-US, install @syncfusion/ej2-cldr-data and call loadCldr with the required JSON data before the Chart renders.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON:
// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json';
// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json';
// loadCldr(currencyData, numbersData);
import { data } from './datasource';
setCurrencyCode('EUR');
function App() {
    const primaryxAxis = { edgeLabelPlacement: 'Shift', title: 'Years' };
    const primaryyAxis = { labelFormat: 'c', title: 'Sales Amount in Millions' };
    const marker = { dataLabel: { visible: true } };
    const tooltip = { enable: true, header: '${point.x}', format: '${point.y}' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison' tooltip={tooltip}>
      <Inject services={[ColumnSeries, Legend, Tooltip, 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, SeriesDirective, Inject,
ColumnSeries, Legend, Tooltip, DataLabel, TooltipSettingsModel, AxisModel }
from'@syncfusion/ej2-react-charts';
import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON:
// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json';
// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json';
// loadCldr(currencyData, numbersData);
import { data } from './datasource';
setCurrencyCode('EUR');

function App() {

  const primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' };
  const primaryyAxis: AxisModel = { labelFormat: 'c', title: 'Sales Amount in Millions' };
  const marker = { dataLabel: { visible: true } };
  const tooltip: TooltipSettingsModel = { enable: true, header: '${point.x}', format: '${point.y}' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'
      tooltip={tooltip}>
      <Inject services={[ColumnSeries, Legend, Tooltip, 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 }
];