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.

For more information on how to configure each Chart 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.

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]]
    };
}

Default Series Configuration

You can apply a subset of settings to all Chart series by using the kendo-chart-series-defaults component.

The kendo-chart-series-defaults component 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