All Components

Chart Overview

The Chart renders a wide range of high-quality data visualizations.

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="bottom" 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="line" style="smooth" [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];
}

Features

The Chart delivers the following features:

Styling

The colors of the Chart are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the configuration.

Events

The Chart emits a large set of events in response to user actions and as part of its lifecycle.

For the initial release, event arguments are not strongly typed.

On Clicking a Series

The following example demonstrates how to attach to the seriesClick event and log the value of the clicked series point by using an event binding.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart (seriesClick)="onSeriesClick($event)">
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];

    private onSeriesClick(e): void {
        console.log(e.value);
    }
}
In this article