New to Kendo UI for Angular? Start a free 30-day trial

Configuration

The Angular Chart provides a set of configuration options, which enable you to specify its behavior.

The Chart enables you to:

This article outlines the general ways to set configuration options for the chart. Explore the rest of the documentation dedicated to specific features or elements or the API reference to see more details on the available settings.

Configuration Components

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

Inline Options

In addition to using the configuration components, the Angular Chart also accepts configuration properties as plain objects. As a result, the representation of the data is more compact, which is suitable for settings that persist throughout the application lifetime.

Example
View Source
Change Theme:

Configuration components and inline options provide the option to mix and match them.

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 following example 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 {
    public chartSeries: any[] = [{ data: [1, 2, 3, 5] }];
    public chartTitle: any = { text: 'Sample Chart' };
}

Structural Directives

You can build configuration components by using Angular structural directives.

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

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton (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 {
    public showSeries: boolean = false;
    public showTransitions: boolean = true;

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

Another common scenario is to build the series from a view model which is stored in your component.

The following example demonstrates how to make use of the ngFor directive.

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton (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 {
    public showSeries: boolean = false;
    public model = [];

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

All changes that are made to the state of the component are detected and applied by the framework in the usual way.