Circular gauge provide supports for internationalization in Axis label
and Tooltip
elements.
For more information about number formatter you can refer
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 in CircularGauge component
using format
property in labelStyle
.
Numeric Format
In the below example axis labels are globalized
to EUR.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
format: 'c'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
format: 'c'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));