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>
    `
})
export 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.

Dimensions and Resizing

By default, the Chart is 400px high and as wide as its container. To set the dimensions of the Chart, use inline styles and CSS.

The component automatically resizes and redraws its content when the size of its container changes. For example, as a result of resizing the browser window. To limit the automatic resizing of the Chart, use the resizeRateLimit option. To disable the automatic resizing, set resizeRateLimit to 0.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [resizeRateLimit]="2">
<!--                 ^^^^^^^^^^^^^^^^^^^^^^
        Will update the chart size up to 2 times a second.
        Resize the Plunkr pane / window to try it out.
-->
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    seriesData: number[] = [1, 2, 3, 5];
}

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.

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>
    `
})
export class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];

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