All Components

Charts Overview

The Charts are a set of Angular components for building common chart types.

The package includes the following component:

  • Chart—Renders generic and highly customizable charts.

The components below are on the Roadmap and will be included in future versions:

  • StockChart—Represents a specialized component for exploring financial time series.
  • Sparklines—Renders tiny charts designed to be embedded in text.

Basic Usage

The following example demonstrates the Chart in action.

@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 format="{0}%"></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>
    `
})
class AppComponent {
  private 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];
}

Installation

  1. The Charts package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-charts @progress/kendo-angular-intl @progress/kendo-drawing hammerjs
  3. Once installed, import the ChartsModule and hammerjs in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ChartsModule } from '@progress/kendo-angular-charts';
    import { AppComponent } from './app.component';
    
    import 'hammerjs';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, ChartsModule]
    })
    export class AppModule {
    }

Dependencies

The Charts package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • @progress/kendo-angular-intl
  • @progress/kendo-drawing
  • rxjs
  • hammerjs

The following dependencies will be installed automatically:

  • @progress/kendo-angular-popup
  • @progress/kendo-angular-resize-sensor
  • @progress/kendo-charts
In this article