All Components

Appearance

The colors of the Chart are derived from the active Kendo UI theme. It is possible to customize them through the theme variables and the configuration.

Setting the Dimensions

By default, the Chart is 400px high and as wide as its container. To set the dimensions of the Chart, use inline styles and CSS.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart style="width: 300px; height: 200px;">
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [1, 2, 3, 5];
}

Limiting the Displayed Range

To limit the range which is displayed by the Chart:

  1. Set the min and max options of the category axis.
  2. Enable panning and zooming, so that the user is able to see the rest of the data.

To limit the range that is displayed by the StockChart, refer to the article on the navigator.

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart
          [categoryAxis]="{ categories: categories, max: 20, labels: { rotation: 'auto'} }"
          [pannable]="{ lock: 'y' }"
          [zoomable]="{ mousewheel: { lock: 'y' } }"
          >
            <kendo-chart-title text="My line chart"></kendo-chart-title>
            <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
            <kendo-chart-tooltip format="{0}"></kendo-chart-tooltip>
            <kendo-chart-series>
                <kendo-chart-series-item type="line" style="smooth" [data]="serie.data" [name]="serie.name">
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>
    `
})
export export class AppComponent implements OnInit {

  serie: any = {
    name: "My data over time",
    data: []
  };
  categories: number[] = [];

  ngOnInit() {
    const baseYear: number = 2000;
    for (let i = 0; i < 200; i++) {
      this.categories.push(baseYear + i);
      this.serie.data.push(Math.floor(Math.random() * 200));
    }
  }

}
In this article