All 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

Export Name

Accessible in templates as #kendoChartInstance="kendoChart"

Inputs

axisDefaults AxisDefaults

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

categoryAxis CategoryAxis | CategoryAxis[]

The category axis configuration options.

chartArea ChartArea

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

legend Legend

The Chart legend configuration options.

panes Pane[]

The Chart panes configuration.

Panes are used to split the Chart in 2 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 boolean | DragAction

Specifies if it is possible to pan the Chart.

plotArea PlotArea

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

renderAs "svg" | "canvas"

Sets the preferred rendering engine.
If not supported by the browser, the Chart switches to the first available mode.

The supported values are:

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

resizeRateLimit number

The maximum number of times the Chart resizes per second.

Defaults to 10. To disable the automatic resizing, set it to 0.

series Series[]

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 arguments. They are evaluated for each point (supplied as
a parameter). If no value is returned, the theme or
seriesDefaults values 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 SeriesDefaults

The default options for all series.

title string | Title

The Chart title configuration options or text.

tooltip Tooltip

The configuration options of the Chart series tooltips.

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

transitions boolean

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

valueAxis ValueAxis | ValueAxis[]

The value axis configuration options.

xAxis XAxis | XAxis[]

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

yAxis YAxis | YAxis[]

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

zoomable boolean | Zoomable

Specifies if the Chart can be zoomed.

Fields

surface Surface

The Drawing Surface of the Chart.

Events

axisLabelClick EventEmitter<AxisLabelClickEvent>

Fires when the user clicks an axis label.

drag EventEmitter<DragEvent>

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

dragEnd EventEmitter<DragEndEvent>

Fires when the user stops dragging the Chart.

dragStart EventEmitter<DragStartEvent>

Fires when the user starts dragging the Chart.

legendItemClick EventEmitter<LegendItemClickEvent>

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

legendItemHover EventEmitter<LegendItemHoverEvent>

Fires when a legend item is hovered.

noteClick EventEmitter<NoteClickEvent>

Fires when the user clicks one of the notes.

noteHover EventEmitter<NoteHoverEvent>

Fires when the user hovers over one of the notes.

plotAreaClick EventEmitter<PlotAreaClickEvent>

Fires when the user clicks the plot area.

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

plotAreaHover EventEmitter<PlotAreaHoverEvent>

Fires when the user hovers the plot area.

render EventEmitter<RenderEvent>

Fires when the Chart is ready to render on screen.
For example, it is possible to use it to remove loading indicators.
Any changes made to options are ignored.

select EventEmitter<SelectEvent>

Fires when the user modifies the selection.

The range units are:

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

selectEnd EventEmitter<SelectEndEvent>

Fires when the user completes modifying the selection.

The range units are:

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

selectStart EventEmitter<SelectStartEvent>

Fires when the user starts modifying the axis selection.

The range units are:

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

seriesClick EventEmitter<SeriesClickEvent>

Fires 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<SeriesHoverEvent>

Fires when the user hovers the Chart series.

zoom EventEmitter<ZoomEvent>

Fires as long as the user is zooming the Chart by using the mousewheel operation.

zoomEnd EventEmitter<ZoomEndEvent>

Fires when the user stops zooming the Chart.

zoomStart EventEmitter<ZoomStartEvent>

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

Methods

exportImage

Exports the Chart as an image. The export operation is asynchronous and returns a promise.

Parameters

options ImageExportOptions

The parameters for the exported image.

Returns

Promise - A promise that will be resolved with a PNG image encoded as a Data URI.

exportSVG

Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise.

Parameters

options SVGExportOptions

Parameters for the exported file

Returns

Promise - A promise that will be resolved with a SVG document encoded as a Data URI

exportVisual

Exports the Chart as a Drawing Scene.

Parameters

options any

The parameters for the export operation.

Returns

Group - The root Group of the scene.

findAxisByName

Returns the axis with the specified name.

Parameters

name string

The axis name.

Returns

ChartAxis - The axis with a corresponding name.

findPaneByIndex

Returns the pane at the specified index.

Parameters

index number

The pane index.

Returns

ChartPane - The pane at the specified index.

findPaneByName

Returns the pane with the specified name.

Parameters

name string

The name of the pane.

Returns

ChartPane - The pane with the provided name.

getPlotArea

Returns the chart plot area.

Returns

ChartPlotArea - The plot area of the Chart.

hideTooltip

Hides the tooltip of the Chart.

resize

Detects the size of the container and redraws the Chart.

Resizing is automatic unless you set the resizeRateLimit option to 0.

showTooltip

Shows the tooltip of the Chart of a specific point or the shared tooltip of a specific category.

Parameters

filter number | string | Date | (point: SeriesPoint) => boolean

The category for a shared tooltip or a function which will be called for each point until the function returns true.

toggleHighlight

Toggles the highlight of the series points or a segment for the Pie, Donut, and Funnel charts.

Parameters

show boolean

A Boolean value that indicates whether the highlight is shown or hidden.

filter string | { category: string; series: string; } | (point: SeriesPoint) => boolean

A string that represents the series or category name, an object with the series and category name, or a function which will be called for each point. The function should return true for the points for which the highlight is toggled.

In this article