Internationalization in React Linear gauge component

24 Jan 20233 minutes to read

Globalization is the process of designing and developing a component that works in different cultures. Internationalization is used to globalize the number content in Linear Gauge component using format property in LinearGaugeComponent. It has static text on some features such as

  • Axis label
  • Tooltip

The static text on above features can be changed to any culture such as Arabic, Deutsch and French. To know more about the globalization in React components, refer here.

Numeric Format

The text in axis labels and tooltip can be displayed in the numeric format such as currency, percentage and so on. To know more about the numeric formats in axis labels, refer here. In the below example, the axis label is displayed in the currency format.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-lineargauge';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
export function App() {
   return(
    <LinearGaugeComponent format='c'>
        <AxesDirective>
            <AxisDirective minimum={0} maximum={120} majorTicks={ { interval:10, height:10 } } minorTicks={ { interval:5, height:5 } } >
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-lineargauge';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
export function App() {
   return(
    <LinearGaugeComponent format='c'>
        <AxesDirective>
            <AxisDirective minimum={0} maximum={120} majorTicks={ { interval:10, height:10 } } minorTicks={ { interval:5, height:5 } } >
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);