All Components

Globalization

Globalization is a process that combines the translation of component messages and the usage of specific culture locales.

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

Internationalization (i18n) is the process of applying specific culture locale formats to your application.

The Charts provide support for internationalization by utilizing the Kendo UI Internationalization package.

For more information on using a different locale from the default one, refer to the article on Internationalization. For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

Localization

The Charts do not provide built-in messages. You can still use their right-to-left support to handle and respond to users who communicate through right-to-left languages such as Arabic, Hebrew, Chinese, and Japanese.

In this article