All Components

Axes

The Chart axes provide a value scale for the plotted data series.

Depending on the series types of your project, the Chart delivers:

  • A set of category and value axes (in Categorical and Radar series).
  • A set of X and Y axes (in Scatter and Polar series).
  • No axes (in Pie and Funnel series).

Categorical Chart Axes

Category axes are declared through the kendo-chart-category-axis-item configuration components and placed in a kendo-chart-category-axis collection. For more information on the available data-binding options, refer to the section on binding categories.

Value axes are declared through the kendo-chart-value-axis-item configuration components and placed in a kendo-chart-value-axis collection.

Categorical Chart Axes Configuration

The following example demonstrates how to configure the value and category axes of the category Chart.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [title]="{ text: 'Miles' }"
                                           [min]="0" [max]="100">
                <!--                       ^^^^^     ^^^^^
                     Note the binding is required,
                     otherwise the property will be
                     bound to a string.
                -->
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

Multiple Categorical Chart Axes

The Chart enables you to render multiple axes by either:

  • Adding multiple kendo-chart-value-axis-item or kendo-chart-category-axis-item components to their respective container, or
  • Providing an array of axis options for the valueAxis or categoryAxis inputs.

To associate a series with a particular value axis, set the name of the axis to the axis option of the series. To specify the category axis which the series will use, set the name of the axis to the categoryAxis option of the series. If you do not specify the axes, the series will use the first value and category axes.

To configure the position of the axes as relative to one another, use the axisCrossingValue option of the axes.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-title text="Hybrid car mileage report"></kendo-chart-title>
          <kendo-chart-legend position="top"></kendo-chart-legend>

          <kendo-chart-value-axis>
            <kendo-chart-value-axis-item *ngFor="let item of valueAxes" [name]="item.name" [title]="{ text: item.title }"
                [min]="item.min" [max]="item.max" [majorUnit]="item.majorUnit" [color]="item.color">
            </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories" [axisCrossingValue]="crossingValues">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let item of series" [name]="item.name" [data]="item.data" [type]="item.type"
                [stack]="item.stack" [color]="item.color">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public series: any[] = [{
        type: 'column',
        data: [20, 40, 45, 30, 50],
        stack: true,
        name: 'on battery',
        color: '#cc6e38'
    }, {
        type: 'column',
        data: [20, 30, 35, 35, 40],
        stack: true,
        name: 'on gas',
        color: '#ef955f'
    }, {
        type: 'line',
        data: [30, 38, 40, 32, 42],
        name: 'mpg',
        color: '#ec5e0a',
        axis: 'mpg'
    }, {
        type: 'line',
        data: [7.8, 6.2, 5.9, 7.4, 5.6],
        name: 'l/100 km',
        color: '#4e4141',
        axis: 'l100km'
    }];

    public valueAxes: any[] = [{
        title: 'miles',
        min: 0,
        max: 100
    }, {
        name: 'km',
        title: 'km',
        min: 0,
        max: 161,
        majorUnit: 32
    }, {
        name: 'mpg',
        title: 'miles per gallon',
        color: '#ec5e0a'
    }, {
        name: 'l100km',
        title: 'liters per 100km',
        color: '#4e4141'
    }];

    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

    // Align the first two value axes to the left
    // and the last two to the right.
    //
    // Right alignment is done by specifying a
    // crossing value greater than or equal to
    // the number of categories.
    public crossingValues: number[] = [0, 0, 10, 10];
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Label Position of the Categorical Chart Axes

The category and value axes provide options for displaying their labels either next to the axis or at the outer edges of the plot area. By default, the labels are positioned next to the axis.

To change the label position, set the position option of the axis labels:

  • When position is set to end, the labels are placed at the end of the crossing axis. Typically, this configuration positions the labels at the top or right end of the Chart unless the crossing axis was reversed.
  • When position is set to start, the labels are placed at the start of the crossing axis. Typically, this configuration positions the labels at the left or bottom end of the Chart unless the crossing axis was reversed.
import { Component } from '@angular/core';
import { AxisLabelsPosition } from '@progress/kendo-angular-charts';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    styles: [ '.k-radio-label { margin: 10px 1em 10px 0; }' ],
    template: `
      <div class="example-config">
        <div class="col-sm example-col">
          <h6>Category axis - Label position</h6>

          <input id="catOnAxis" type="radio" name="cat" class="k-radio"
                 value="onAxis" [(ngModel)]="categoryLabelsPosition" />
          <label for="catOnAxis" class="k-radio-label">On Axis</label>

          <input id="catStart" type="radio" name="cat" class="k-radio"
                 value="start" [(ngModel)]="categoryLabelsPosition" />
          <label for="catStart" class="k-radio-label">Start</label>

          <input id="catEnd" type="radio" name="cat" class="k-radio"
                 value="end" [(ngModel)]="categoryLabelsPosition" />
          <label for="catEnd" class="k-radio-label">End</label>
        </div>

        <div class="col-sm example-col">
          <h6>Value axis - Label position</h6>

          <input id="valOnAxis" type="radio" name="val" class="k-radio"
                 value="onAxis" [(ngModel)]="valueLabelsPosition" />
          <label for="valOnAxis" class="k-radio-label">On Axis</label>

          <input id="valStart" type="radio" name="val" class="k-radio"
                 value="start" [(ngModel)]="valueLabelsPosition" />
          <label for="valStart" class="k-radio-label">Start</label>

          <input id="valEnd" type="radio" name="val" class="k-radio"
                 value="end" [(ngModel)]="valueLabelsPosition" />
          <label for="valEnd" class="k-radio-label">End</label>
        </div>
      </div>

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item>
                <kendo-chart-category-axis-item-labels [position]="categoryLabelsPosition">
                </kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-value-axis>
            <kendo-chart-value-axis-item>
                <kendo-chart-value-axis-item-labels [position]="valueLabelsPosition">
                </kendo-chart-value-axis-item-labels>
            </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public categoryLabelsPosition: AxisLabelsPosition = 'start';
    public valueLabelsPosition: AxisLabelsPosition = 'onAxis';
    public data: any[] = mockData();
}

const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Displaying Time Series

The Category axis delivers the following dedicated features which are tailored for displaying time series and get automatically activated when the axis is bound to Date objects:

To disable the Category axis features for displaying time series, set the axis mode to "category".

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item>
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Selecting Time Intervals

When the Category Chart is set to display time series, the Category axis divides into time slots. To set the time scale for these slots, define a "base unit", which can be hours, days, weeks, and so on. By default, the base unit matches the smallest time interval between the source dates. This approach ensures that all data points that are present in the original series will be displayed as they are.

You can use the baseUnit setting to manually select a different time unit. To display every N-th base unit, set the baseUnitStep option.

Setting the base unit to "fit" limits the total number of categories either to the set maxDateGroups value or, otherwise, to the default maxDateGroups value of 10.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <label for="bu">Base Unit</label>
        <select id="bu" [(ngModel)]="baseUnit">
          <option value="days">days</option>
          <option value="weeks" selected>weeks</option>
          <option value="months">months</option>
        </select>
      </div>

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [baseUnit]="baseUnit">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
    public baseUnit = 'weeks';
    public aggregate = 'max';
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Aggregating Data

When the Category Chart is set to display time series, it processes the data points for each time slot and produces a new point by using an aggregate function.

By default, the aggregate function returns the maximum value of the value fields. If the category contains only one point, aggregate returns the point without modification. Other aggregates, such as count and sum, produce their own value even if the category contains only one data point.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <label for="bu">Aggregate</label>
        <select id="bu" [(ngModel)]="aggregate">
          <option value="max" selected>max</option>
          <option value="min">min</option>
        </select>
      </div>

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date"
                                   [aggregate]="aggregate">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item baseUnit="weeks">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
    public aggregate = 'max';
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Limiting the Number of Labels

Normally, each date interval gets its own label. Labels may overlap and become illegible in densely populated charts. To work around this issue, set an upper limit to the number of labels for display by using the maxDivisions option.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [maxDivisions]="10">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate let-category="category" let-value="value">
            {{ category | date }}: {{ value }}
          </ng-template>
        </kendo-chart-tooltip>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

You can save space and rotate the labels at a fixed or at an optimal ("auto") angle by using the labels.rotation option.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [labels]="{ format: 'd', rotation: 'auto' }">
          </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Scatter Chart Axes

X axes are declared through the kendo-chart-x-axis-item configuration components and placed in a kendo-chart-x-axis collection.

Y axes are declared through the kendo-chart-y-axis-item configuration components and placed in a kendo-chart-y-axis collection.

Scatter Chart Axes Configuration

The following example demonstrates how to configure the X and Y axes of the Scatter Chart.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-x-axis>
              <kendo-chart-x-axis-item [title]="{ text: 'Rainfall' }">
              </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>

          <kendo-chart-y-axis>
              <kendo-chart-y-axis-item [title]="{ text: 'Windspeed' }">
              </kendo-chart-y-axis-item>
          </kendo-chart-y-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="scatter">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[][] = [
        [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1],
        [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0]
    ];
}

Multiple Scatter Chart Axes

The Chart enables you to render multiple axes either by:

  • Adding multiple kendo-chart-x-axis-item or kendo-chart-y-axis-item components to their respective container, or
  • Providing an array of axis options for the xAxis or yAxis inputs.

To associate a series with a particular X axis, set the name of the axis to the xAxis option of the series. To specify the Y axis which the series will use, set the name of the axis to the yAxis option of the series. If you do not specify the axes, the series will use the first X and Y axes.

To configure the position of the axes as relative to one another, use the axisCrossingValue option of the axes.

import { Component } from '@angular/core';
import { enginePerformance } from './data';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-title text="Dyno run results"></kendo-chart-title>
          <kendo-chart-legend [visible]="false"></kendo-chart-legend>

          <kendo-chart-y-axis>
            <kendo-chart-y-axis-item [title]="{ text: 'Power (bhp)' }">
            </kendo-chart-y-axis-item>
            <kendo-chart-y-axis-item name="torque" [title]="{ text: 'Torque (lb-ft)' }">
            </kendo-chart-y-axis-item>
          </kendo-chart-y-axis>

          <kendo-chart-x-axis>
              <kendo-chart-x-axis-item [axisCrossingValue]="crossingValues" [title]="{ text: 'Engine rpm' }" [labels]="{ format: 'n0' }">
              </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let item of series" type="scatterLine" [name]="item.name" [data]="item.data"
                [xField]="item.xField" [yField]="item.yField" [tooltip]="item.tooltip">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public series: any[] = [{
        name: 'Power',
        data: enginePerformance,
        xField: 'rpm',
        yField: 'power',
        tooltip: {
            format: '{1} bhp @ {0:N0} rpm'
        }
    }, {
        name: 'Torque',
        data: enginePerformance,
        xField: 'rpm',
        yField: 'torque',
        yAxis: 'torque',
        tooltip: {
            format: '{1} lb-ft @ {0:N0} rpm'
        }
    }];

    // Align torque axis to the right by specifying
    // a crossing value greater than or equal to the axis maximum.
    public crossingValues: number[] = [0, 10000];
}
export const enginePerformance: any[] = [
    {
        rpm: 1000,
        torque: 50,
        power: 10
    },
    {
        rpm: 1500,
        torque: 65,
        power: 19
    },
    {
        rpm: 2000,
        torque: 80,
        power: 30
    },
    {
        rpm: 2500,
        torque: 92,
        power: 44
    },
    {
        rpm: 3000,
        torque: 104,
        power: 59
    },
    {
        rpm: 3500,
        torque: 114,
        power: 76
    },
    {
        rpm: 4000,
        torque: 120,
        power: 91
    },
    {
        rpm: 4500,
        torque: 125,
        power: 107
    },
    {
        rpm: 5000,
        torque: 130,
        power: 124
    },
    {
        rpm: 5500,
        torque: 133,
        power: 139
    },
    {
        rpm: 6000,
        torque: 130,
        power: 149
    },
    {
        rpm: 6500,
        torque: 122,
        power: 151
    },
    {
        rpm: 7000,
        torque: 110,
        power: 147
    }
];
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Label Position of the Scatter Chart Axes

The X and Y axes provide options for displaying their labels either next to the axis or at the outer edges of the plot area. By default, the labels are positioned next to the axis.

To change the label position, set the position option of the axis labels:

  • When position is set to end, the labels are placed at the end of the crossing axis. Typically, this configuration positions the labels at the top or right end of the Chart unless the crossing axis was reversed.
  • When position is set to start, the labels are placed at the start of the crossing axis. Typically, this configuration positions the labels at the left or bottom end of the Chart unless the crossing axis was reversed.
import { Component } from '@angular/core';
import { AxisLabelsPosition } from '@progress/kendo-angular-charts';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    styles: [ '.k-radio-label { margin: 10px 1em 10px 0; }' ],
    template: `
      <div class="example-config">
        <div class="col-sm example-col">
          <h6>X axis - Label position</h6>

          <input id="xOnAxis" type="radio" name="x" class="k-radio"
                 value="onAxis" [(ngModel)]="xLabelsPosition" />
          <label for="xOnAxis" class="k-radio-label">On Axis</label>

          <input id="xStart" type="radio" name="x" class="k-radio"
                 value="start" [(ngModel)]="xLabelsPosition" />
          <label for="xStart" class="k-radio-label">Start</label>

          <input id="xEnd" type="radio" name="x" class="k-radio"
                 value="end" [(ngModel)]="xLabelsPosition" />
          <label for="xEnd" class="k-radio-label">End</label>
        </div>

        <div class="col-sm example-col">
          <h6>Y axis - Label position</h6>

          <input id="yOnAxis" type="radio" name="y" class="k-radio"
                 value="onAxis" [(ngModel)]="yLabelsPosition" />
          <label for="yOnAxis" class="k-radio-label">On Axis</label>

          <input id="yStart" type="radio" name="y" class="k-radio"
                 value="start" [(ngModel)]="yLabelsPosition" />
          <label for="yStart" class="k-radio-label">Start</label>

          <input id="yEnd" type="radio" name="y" class="k-radio"
                 value="end" [(ngModel)]="yLabelsPosition" />
          <label for="yEnd" class="k-radio-label">End</label>
        </div>
      </div>

      <kendo-chart [transitions]="false">
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="scatterLine" [data]="data"
                                   yField="TMax" xField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-x-axis>
            <kendo-chart-x-axis-item>
                <kendo-chart-x-axis-item-labels [position]="xLabelsPosition">
                </kendo-chart-x-axis-item-labels>
            </kendo-chart-x-axis-item>
        </kendo-chart-x-axis>

        <kendo-chart-y-axis>
            <kendo-chart-y-axis-item>
                <kendo-chart-y-axis-item-labels [position]="yLabelsPosition">
                </kendo-chart-y-axis-item-labels>
            </kendo-chart-y-axis-item>
        </kendo-chart-y-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public xLabelsPosition: AxisLabelsPosition = 'start';
    public yLabelsPosition: AxisLabelsPosition = 'onAxis';
    public data: any[] = mockData();
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Displaying Dates

The Scatter Chart provides option for:

Using the X and Y Axes

The following example demonstrates how to use the X and Y axes of the Chart to display dates.

import { Component } from '@angular/core';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <label for="bu">Base Unit</label>
        <select id="bu" [(ngModel)]="baseUnit">
          <option value="days">days</option>
          <option value="weeks" selected>weeks</option>
          <option value="months">months</option>
        </select>
      </div>

      <kendo-chart [transitions]="false">
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="scatterLine" [data]="data"
                                   yField="TMax" xField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-x-axis>
            <kendo-chart-x-axis-item [baseUnit]="baseUnit">
            </kendo-chart-x-axis-item>
        </kendo-chart-x-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = mockData();
    public baseUnit = 'weeks';
}
const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    return p;
  }
);
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Selecting Time Intervals

When the Scatter Chart is set to display time series, its axis divides into time slots. To set the time scale for these slots, define a "base unit", which can be hours, days, weeks, and so on.

You can use the baseUnit setting to manually select a different time unit. To display every N-th base unit, set the baseUnitStep option.

The baseUnit setting for the Scatter Charts affects only the axis labels. This behavior contrasts the settings of the Categorical Chart axes that are used by the Chart to compute time series aggregates.

Default Axis Configuration

You can also apply settings to all Chart axes, regardless of their kind, by using the kendo-chart-axis-defaults component.

The kendo-chart-axis-defaults component supports the following child components:

The following example demonstrates how to set the default axis color and label font.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-axis-defaults [line]="{ color: 'red' }">
            <kendo-chart-axis-defaults-labels font="12pt sans-serif">
            </kendo-chart-axis-defaults-labels>
          </kendo-chart-axis-defaults>

          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

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