Search results

Localization in Angular Stock Chart component

15 Jun 2021 / 2 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

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';
import { L10n, setCulture  } from '@syncfusion/ej2-base';
setCulture('ar-AR');
L10n.load({
    'ar-AR': {
        'chart': {
            ZoomIn: 'تكبير',
            ZoomOut: 'تصغير',
            Zoom: 'زوم',
            Pan: 'مقلاة',
            Reset: 'إعادة تعيين',
            ResetZoom: ' زومإعادة تعيين'
        },
    }
});

@Component({
    selector: 'app-container',
    template:
        `<ejs-stockchart id='chart-container' [primaryXAxis]='primaryXAxis' style="display:block;"
        [primaryYAxis]='primaryYAxis' [crosshair]='crosshair' (tooltipRender)='tooltipRender($event)' [tooltip]='tooltip'
        [zoomSettings]="zoomSettings" [locale]='ar-AR'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='data1' type='Candle' xName='x' yName='high' high='high' low='low'>
            </e-stockchart-series>
        </e-stockchart-series-collection>
    </ejs-stockchart>`
})

export class AppComponent implements OnInit {

    public data1: Object[] = chartData;

    public primaryXAxis: Object = { majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true } };

    public primaryYAxis: Object = {
        lineStyle: { color: 'transparent' },
        majorTickLines: { color: 'transparent', width: 0 },
        crosshairTooltip: { enable: true }
    };
    public zoomSettings: Object = {
        enableMouseWheelZooming: true,
        mode: 'XY'
    };
    public crosshair: Object = {
        enable: true
    };
    public tooltipRender(args: ITooltipRenderEventArgs): void {
        if (args.text.split('<br/>')[4]) {
        let target: number = parseInt(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0], 10);
        let value: string = (target / 100000000).toFixed(1) + 'B';
        args.text = args.text.replace(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0], value);
        }
    };

    public tooltip: object = { enable: true };
    constructor() {
        //code
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';
import { CandleSeriesService, LineSeriesService, TmaIndicatorService, DateTimeService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartAllModule, StockChartAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ CandleSeriesService, LineSeriesService, TmaIndicatorService, DateTimeService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);