Internationalization in React Treemap component

24 Jan 20235 minutes to read

The TreeMap control supports internationalization for the following elements:

  • Data label
  • Tooltip

For more information about number and date formatter, refer to internationalization.

Globalization

Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the TreeMap control using the format property in the TreeMap.

Numeric format

In the following code example, tooltip is globalized to Deutsch culture.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  TreeMapComponent,
  TreeMapTooltip,
  Inject,
} from '@syncfusion/ej2-react-treemap';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
export function App() {
  return (
    <TreeMapComponent
      format="c"
      dataSource={[
        { State: 'United States', GDP: 17946, percentage: 11.08, Rank: 1 },
        { State: 'China', GDP: 10866, percentage: 28.42, Rank: 2 },
        { State: 'Japan', GDP: 4123, percentage: -30.78, Rank: 3 },
        { State: 'Germany', GDP: 3355, percentage: -5.19, Rank: 4 },
        { State: 'United Kingdom', GDP: 2848, percentage: 8.28, Rank: 5 },
        { State: 'France', GDP: 2421, percentage: -9.69, Rank: 6 },
        { State: 'India', GDP: 2073, percentage: 13.65, Rank: 7 },
        { State: 'Italy', GDP: 1814, percentage: -12.45, Rank: 8 },
        { State: 'Brazil', GDP: 1774, percentage: -27.88, Rank: 9 },
        { State: 'Canada', GDP: 1550, percentage: -15.02, Rank: 10 },
      ]}
      weightValuePath="GDP"
      tooltipSettings={{
        visible: true,
      }}
    >
      <Inject services={[TreeMapTooltip]} />
    </TreeMapComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  TreeMapComponent,
  TreeMapTooltip,
  Inject,
} from '@syncfusion/ej2-react-treemap';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
export function App() {
  return (
    <TreeMapComponent
      format="c"
      dataSource={[
        { State: 'United States', GDP: 17946, percentage: 11.08, Rank: 1 },
        { State: 'China', GDP: 10866, percentage: 28.42, Rank: 2 },
        { State: 'Japan', GDP: 4123, percentage: -30.78, Rank: 3 },
        { State: 'Germany', GDP: 3355, percentage: -5.19, Rank: 4 },
        { State: 'United Kingdom', GDP: 2848, percentage: 8.28, Rank: 5 },
        { State: 'France', GDP: 2421, percentage: -9.69, Rank: 6 },
        { State: 'India', GDP: 2073, percentage: 13.65, Rank: 7 },
        { State: 'Italy', GDP: 1814, percentage: -12.45, Rank: 8 },
        { State: 'Brazil', GDP: 1774, percentage: -27.88, Rank: 9 },
        { State: 'Canada', GDP: 1550, percentage: -15.02, Rank: 10 },
      ]}
      weightValuePath="GDP"
      tooltipSettings=
    >
      <Inject services={[TreeMapTooltip]} />
    </TreeMapComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);