Localization in Angular Stock chart component
27 Apr 20244 minutes to read
Localization library allows to localize the default text content of StockChart. In stock 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { StockChartAllModule, ChartAllModule, RangeNavigatorAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, SplineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
import { L10n, setCulture } from '@syncfusion/ej2-base';
setCulture('ar-AR');
L10n.load({
'ar-AR': {
'chart': {
ZoomIn: 'تكبير',
ZoomOut: 'تصغير',
Zoom: 'زوم',
Pan: 'مقلاة',
Reset: 'إعادة تعيين',
ResetZoom: ' زومإعادة تعيين'
},
}
});
@Component({
imports: [
StockChartAllModule, ChartAllModule, RangeNavigatorAllModule
],
providers: [ DateTimeService, SplineSeriesService],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis'
[crosshair]='crosshair' [zoomSettings]="zoomSettings" locale='ar-AR'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Spline' xName='x' yName='open' [marker]='marker'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public chartData?: Object[];
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public crosshair?: Object;
public zoomSettings?: Object;
public marker?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.primaryXAxis = {
valueType: 'DateTime',
majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true }
};
this.primaryYAxis = {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 },
crosshairTooltip: { enable: true }
};
this.zoomSettings = {
enableMouseWheelZooming: true,
mode: 'XY'
};
this.crosshair = { enable: true };
this.marker = { visible: true, width: 10, height: 10 };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));