All Components

Chart Overview

The Chart that renders high-quality data visualizations and provides a full spectrum of configuration options.

Basic Usage

The following example demonstrates the Chart in action.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-title text="Sample Chart"></kendo-chart-title>
          <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];
}

Configuration

The Chart provides configuration components, such as the kendo-chart-series, that allow you to:

Inline Setup

In addition to using the configuration components, the Chart also accepts configuration properties as plain objects. This results in a more compact representation and is especially suitable for settings that persist throughout the application lifetime.

The following example is the same as the demo on the basic usage above.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [title]="chartTitle" [series]="chartSeries">
        </kendo-chart>
    `
})
class AppComponent {
    private chartSeries: any[] = [{ data: [1, 2, 3, 5] }];
    private chartTitle: any = { text: 'Sample Chart' };
}

Configuration components and inline options can be mixed and matched.

Both configuration components and inline options update the same internal store. If a property is configured by using the two of them, the configuration component will take precedence over the inline option.

The example below demonstrates that only the kendo-chart-series component is taken into account.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [title]="chartTitle" [series]="chartSeries">
          <kendo-chart-series>
            <kendo-chart-series-item [data]="[5, 3, 2, 1]">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private chartSeries: any[] = [{ data: [1, 2, 3, 5] }];
    private chartTitle: any = { text: 'Sample Chart' };
}

Structural Directives

Configuration components can be built by using Angular structural directives.

The example below demonstrates how to toggle the visibility of individual series.

@Component({
    selector: 'my-app',
    template: `
        <button (click)="toggleSeries()">Toggle second series</button>
        <kendo-chart [transitions]="showTransitions">
          <kendo-chart-series>
            <kendo-chart-series-item [data]="[1, 2, 3, 5]">
            </kendo-chart-series-item>
            <kendo-chart-series-item [data]="[5, 3, 2, 1]" *ngIf="showSeries">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private showSeries: boolean = false;
    private showTransitions: boolean = true;

    private toggleSeries() {
        this.showSeries = !this.showSeries;
        this.showTransitions = false;
    }
}

Another common scenario is building the series from a view model stored in your component. The following example makes use of the ngFor directive.

@Component({
    selector: 'my-app',
    template: `
        <button (click)="addSeries()">Add series</button>
        <kendo-chart [transitions]="false">
          <kendo-chart-series>
            <kendo-chart-series-item
                *ngFor="let series of model"
                [name]="series.name"
                [data]="series.data">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    private showSeries: boolean = false;
    private model = [];

    private addSeries() {
        this.model.push({
            name: `Series #${this.model.length + 1}`,
            data: [ Math.random(), Math.random(), Math.random() ]
        });
    }
}

Any changes made to the state of the component will be detected and applied as usual by the framework.

Series Types

The Chart supports the following visualization types:

  • Area and Vertical Area
  • Bar and Column
  • Box Plot
  • Bubble
  • Bullet
  • Funnel
  • Line and Vertical Line
  • OHLC and Candlestick
  • Pie and Donut
  • Radar and Polar
  • Range Bar and Column
  • Scatter
  • Scatter Line
  • Waterfall

For more information on how to configure each kind of series, refer to the article on series types.

Data Binding

For more information on how to bind the Chart to data, refer to the article on data binding.

Chart Structure

The main building blocks of a Kendo UI Chart are:

  • Title
  • Legend
  • Chart Area
  • Plot Area
  • Axes
  • Series

For detailed information on how to customize them, refer to the article on the Chart structure.

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.

The example below 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