Search results

Internationalization in React TreeMap component

24 Sep 2021 / 1 minute 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.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';

class App extends React.Component {
render() {
  return ( <TreeMapComponent id='treemap'
    format={"n"}
    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'>
</TreeMapComponent> );
 }
}
ReactDOM.render(<App />, document.getElementById('treemap'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
class App extends React.Component {
    render() {
        return (<TreeMapComponent id='treemap' format={"n"} 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'>
</TreeMapComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('treemap'));