All Components

Configuration

The Chart provides configuration options for:

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. This results in a more compact data representation and is especially suitable for settings that persist throughout the application lifetime.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [title]="chartTitle" [series]="chartSeries">
        </kendo-chart>
    `
})
class AppComponent {
    public chartSeries: any[] = [{ data: [1, 2, 3, 5] }];
    public 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 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

Configuration components can be built 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 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 {
    public showSeries: boolean = false;
    public model = [];

    public 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.

In this article