All Components

Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in Kendo UI for Angular, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to set the locale and text direction of a Chart.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="column" [data]="seriesData"
          field="sales" categoryField="product">
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [labels]="{ format: '{0:C}' }">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
    </kendo-chart>
  `
})
export class AppComponent {
  private seriesData: Model[] = [{
    product: 'Chai',
    sales: 200
  }, {
    product: 'אחרים',
    sales: 250
  }];
}

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { IntlModule } from '@progress/kendo-angular-intl';
import { RTL } from '@progress/kendo-angular-l10n';

import 'hammerjs';

// Load all required data for the he locale
import '@progress/kendo-angular-intl/locales/he/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ChartsModule,

    // Import the internationalization module
    IntlModule
  ],
  providers: [{
    // Set default locale to he-IL
    provide: LOCALE_ID, useValue: 'he-IL'
  }, {
    // Set the text direction to Right-to-Left
    provide: RTL, useValue: true
  }]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Internationalization

The internationalization (i18n) process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Charts do not provide built-in translated messages or the option to implement and localize custom ones.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Chart.

import { RTL } from '@progress/kendo-angular-l10n';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [categoryAxis]="{ categories: categories }">
            <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
            <kendo-chart-legend position="top" orientation="horizontal"></kendo-chart-legend>
            <kendo-chart-tooltip [shared]="true"></kendo-chart-tooltip>
            <kendo-chart-series>
                <kendo-chart-series-item *ngFor="let item of series"
                    type="column" [data]="item.data" [name]="item.name">
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>
    `,
    providers: [{ provide: RTL, useValue: true }]
})
class AppComponent {
  public series: any[] = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
  }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  },{
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];
  private categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
}
In this article