Configuration
The Angular Chart provides a set of configuration options, which enable you to specify its behavior.
The Chart enables you to:
- Use configuration components.
- Use inline options.
- Build configuration components through Angular structural directives.
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:
- Customize the appearance of individual Chart elements.
- Display data series of different types.
- Bind to data which is provided by your component.
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.
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>
`
})
export 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>
`
})
export 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.