Configuration

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

The Chart enables you to:

Configuration Components

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

Inline Options

In addition to using the configuration components, the 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
Edit In Stackblitz  
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 (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 (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.

In this article

Not finding the help you need?