All Components

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.

@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 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