Localization library allows to localize the default text content of Chart. In Chart component, it has the static text on some features(like zooming toolbars) and this can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.
| Locale key words | Text to display |
| Zoom | Zoom |
| ZoomIn | ZoomIn |
| ZoomOut | ZoomOut |
| Reset | Reset |
| Pan | Pan |
| ResetZoom | Reset Zoom |
To load translation object in an application use load function of L10n class.
For more information about localization, refer this
localization
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Zoom, DataLabel,ZoomSettingsModel,AxisModel
} from '@syncfusion/ej2-react-charts';
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AR': {
'chart': {
ZoomIn: 'تكبير',
ZoomOut: 'تصغير',
Zoom: 'زوم',
Pan: 'مقلاة',
Reset: 'إعادة تعيين',
},
}
});
class App extends React.Component<{}, {}> {
public data: any[] = [
{ 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 }
];
public primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' };
public primaryyAxis: AxisModel = { title: 'Sales Amount in Millions' };
public zoomsettings: ZoomSettingsModel = {
enableMouseWheelZooming: true, enablePinchZooming: true,
enableSelectionZooming: true
};
public marker = { dataLabel: { visible: true } };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Average Sales Comparison'
zoomSettings={this.zoomsettings}
locale='ar-AR'>
<Inject services={[ColumnSeries, Legend, Zoom, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' name='Product X' type='Column'
marker={this.marker}>
</SeriesDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Product Y' type='Column'
marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Zoom, DataLabel } from '@syncfusion/ej2-react-charts';
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AR': {
'chart': {
ZoomIn: 'تكبير',
ZoomOut: 'تصغير',
Zoom: 'زوم',
Pan: 'مقلاة',
Reset: 'إعادة تعيين',
},
}
});
class App extends React.Component {
constructor() {
super(...arguments);
this.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 }
];
this.primaryxAxis = { edgeLabelPlacement: 'Shift', title: 'Years' };
this.primaryyAxis = { title: 'Sales Amount in Millions' };
this.zoomsettings = {
enableMouseWheelZooming: true, enablePinchZooming: true,
enableSelectionZooming: true
};
this.marker = { dataLabel: { visible: true } };
}
render() {
return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='Average Sales Comparison' zoomSettings={this.zoomsettings} locale='ar-AR'>
<Inject services={[ColumnSeries, Legend, Zoom, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' name='Product X' type='Column' marker={this.marker}>
</SeriesDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y1' name='Product Y' type='Column' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));