All Components

Series

The data series are the main components of the Chart.

The rest of the Chart elements play a supportive role for the user when understanding the plotted series.

The Chart supports the following series types:

Basic Usage

Series are declared by using the kendo-chart-series-item configuration components and placed in a kendo-chart-series collection.

The following example configures a set of Scatter Line series.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-series>
            <kendo-chart-series-item type="scatterLine" [data]="seriesData.one">
            </kendo-chart-series-item>
            <kendo-chart-series-item type="scatterLine" [data]="seriesData.two">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    public seriesData: any {
        one: [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]],
        two: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
    };
}

For more information on how to configure each kind of series, refer to the articles on the series types.

For more information on how to bind the series to data, refer to the article on data binding.

Default Series Configuration

It is possible to apply a subset of settings to all series on the Chart by using the kendo-chart-series-defaults component.

It supports the following child components:

The following example demonstrates how to set the default series type and labels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [categoryAxis]="{ categories: categories }">
          <kendo-chart-series-defaults type="bar">
            <kendo-chart-series-defaults-labels format="c">
            </kendo-chart-series-defaults-labels>
          </kendo-chart-series-defaults>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="salesData">
            </kendo-chart-series-item>
            <kendo-chart-series-item [data]="purchaseData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    public salesData: number[] = [20, 40, 45, 30, 50];
    public purchaseData: number[] = [12, 30, 30, 45, 10];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}
In this article