All Components
Components

ChartComponent

The root Chart component.

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

@Component({
  selector: 'my-app',
  template: `
    <button (click)="toggleLegend()">Toggle Legend</button>
    <button (click)="toggleSeries()">Toggle Series</button>
    <kendo-chart>
      <kendo-chart-legend [visible]="legendVisible">
      </kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item *ngIf="seriesVisible" name="Series #1"
                                  type="line" [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
  private legendVisible: boolean = true;
  private seriesVisible: boolean = true;

  public toggleSeries(): void {
    this.seriesVisible = !this.seriesVisible;
  }

  public toggleLegend(): void {
    this.legendVisible = !this.legendVisible;
  }
}

Selector

kendo-chart

Inputs

axisDefaults any

The default options for all Chart axes. Accepts the options supported by categoryAxis, valueAxis, xAxis, and yAxis.

categoryAxis any

The category axis configuration options.

chartArea any

The Chart area configuration options. Represents the entire visible area of the Chart.

legend any

The Chart legend configuration options.

panes any

The Chart panes configuration.

Panes are used to split the Chart in two or more parts. The panes are ordered from top to bottom.

Each axis can be associated with a pane by setting its pane option to the name of the desired pane. Axis that do not have a specified pane are placed in the top (default) pane.

Series are moved to the desired pane by associating them with an axis.

pannable DragAction

Specifies if it is possible to pan the Chart.

plotArea any

The plot area configuration options. The plot area is the area which displays the series.

renderAs string

Sets the preferred rendering engine. If it is not supported by the browser, the Chart will switch to the first available mode.

The supported values are:

  • "svg"—If available, renders the widget as an inline SVG document.
  • "vml"—If available, renders the widget as a VML.
  • "canvas"—If available, renders the widget as a Canvas element.

series any

The configuration of the Chart series.

The series type is determined by the value of the type field. If a type value is missing, the type is assumed to be the one specified in seriesDefaults.

Some options accept functions as an argument. They will be evaluated for each point (supplied as parameter). If no value is returned, the theme or seriesDefaults value are used.

seriesColors string[]

The default colors for the Chart series. When all colors are used, new colors are pulled from the start again.

seriesDefaults any

The default options for all series.

title string | any

The Chart title configuration options or text.

tooltip any

The configuration options of the chart series tooltips.

The chart series tooltip is displayed when the tooltip.visible option is set to true.

transitions boolean

If set to true, the Chart will play animations when displaying the series. By default, animations are enabled.

valueAxis any

The value axis configuration options.

xAxis any

The x-axis configuration options of the Scatter Chart. Supports all valueAxis options.

yAxis any

The y-axis configuration options of the Scatter Chart. Supports all valueAxis options.

zoomable boolean | any

Specifies if the Chart can be zoomed.

Events

axisLabelClick EventEmitter

Fired when the user clicks an axis label.

The event handler function context (available via the this keyword) will be set to the widget instance.

drag EventEmitter

Fired as long as the user is dragging the Chart using the mouse or swipe gestures.

The event handler function context (available via the this keyword) will be set to the widget instance.

dragEnd EventEmitter

Fired when the user stops dragging the Chart.

The event handler function context (available via the this keyword) will be set to the widget instance.

dragStart EventEmitter

Fired when the user starts dragging the Chart.

The event handler function context (available via the this keyword) will be set to the widget instance.

legendItemClick EventEmitter

Fires when an legend item is clicked, before the selected series visibility is toggled. Can be prevented.

legendItemHover EventEmitter

Fires when a legend item is hovered.

noteClick EventEmitter

Fired when the user clicks one of the notes.

The event handler function context (available via the this keyword) will be set to the widget instance.

noteHover EventEmitter

Fired when the user hovers one of the notes.

The event handler function context (available via the this keyword) will be set to the widget instance.

plotAreaClick EventEmitter

Fired when the user clicks the plot area.

The click event will be triggered by the tap and contextmenu events. The e.originalEvent.type field can be inspected to distinguish between the original events.

plotAreaHover EventEmitter

Fired when the user hovers the plot area.

render EventEmitter

Fired when the Chart is ready to render on screen.

For example, it is possible to use it to remove loading indicators. Changes to options will be ignored.

The event handler function context (available via the this keyword) will be set to the widget instance.

select EventEmitter

Fired when the user modifies the selection.

The range units are:

  • Generic axis—Category index (0-based).
  • Date axis—Date instance.

The event handler function context (available via the this keyword) will be set to the widget instance.

selectEnd EventEmitter

Fired when the user completes modifying the selection.

The range units are:

  • Generic axis—Category index (0-based).
  • Date axis—Date instance.

The event handler function context (available via the this keyword) will be set to the widget instance.

selectStart EventEmitter

Fired when the user starts modifying the axis selection.

The range units are:

  • Generic axis—Category index (0-based).
  • Date axis—Date instance.

The event handler function context (available via the this keyword) will be set to the widget instance.

seriesClick EventEmitter

Fired when the user clicks the Chart series.

The click event will be triggered by the tap and contextmenu events. To distinguish between the original events, inspect the e.originalEvent.type field.

seriesHover EventEmitter

Fired when the user hovers the Chart series.

The event handler function context (available via the this keyword) will be set to the widget instance.

zoom EventEmitter

Fired as long as the user is zooming the Chart using the mousewheel operation.

The event handler function context (available via the this keyword) will be set to the widget instance.

zoomEnd EventEmitter

Fired when the user stops zooming the Chart.

The event handler function context (available via the this keyword) will be set to the widget instance.

zoomStart EventEmitter

Fired when the user uses the mousewheel to zoom the Chart.

The event handler function context (available via the this keyword) will be set to the widget instance.

In this article