ChartComponent

The root Chart component.

ts

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

@Component({
  selector: 'my-app',
  template: `
    <button kendoButton (click)="toggleLegend()">Toggle Legend</button>
    <button kendoButton (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 {
  public legendVisible: boolean = true;
  public 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

Name	Type	Default	Description
axisDefaults	AxisDefaults		The default options for all Chart axes. Accepts the options which are supported by categoryAxis, valueAxis, xAxis, and yAxis.
categoryAxis	CategoryAxis | CategoryAxis[]		The configuration options of the category axis.
chartArea	ChartArea		The configuration options of the Chart area. Represents the entire visible area of the Chart.
drilldownLevel	number		Gets or sets the current drill-down level for Drilldown Charts. To return to a previous level, set the value to a number less than the current level. To return to the root chart, set the value to 0. Setting the value to a number greater than the current level will have no effect.
legend	Legend		The configuration options of the Chart legend.
paneDefaults	PaneDefaults		The default options of all panes.
panes	Pane[]		The configuration of the Chart panes. Panes are used to split the Chart into two or more parts. The panes are ordered from top to bottom. To associate each axis with a pane, set 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. To move a series to the desired pane, associate them with an axis.
pannable	boolean | DragAction	false	Specifies if the Chart can be panned. Panning is not available for the Donut, Pie, Funnel, Pyramid, Polar, and Radar series.
plotArea	PlotArea		The configuration options of the plot area. The plot area is the area which displays the series.
popupSettings	PopupSettings		The settings for the tooltip popup.
renderAs	"canvas" | "svg"		Sets the preferred rendering engine. If not supported by the browser, the Chart switches to the first available mode.
resizeRateLimit	number	10	Limits the automatic resizing of the Chart. Sets the maximum number of times per second that the component redraws its content when the size of its container changes. 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 Chart renders the type that is specified in seriesDefaults. Some options accept functions as arguments. These arguments are evaluated for each point which is supplied as a parameter. If no value is returned, the Chart uses the theme or seriesDefaults values.
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 of all series.
subtitle	string | Subtitle		The configuration options or the text of the Chart subtitle.
title	string | Title		The configuration options or the text of the Chart title.
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	true	If set to true, the Chart plays animations when it displays the series. By default, animations are enabled.
valueAxis	ValueAxis | ValueAxis[]		The configuration options of the value axis.
xAxis	XAxis | XAxis[]		The configuration options of the Scatter Chart X-axis. Supports all valueAxis options.
yAxis	YAxis | YAxis[]		The configuration options of the Scatter Chart Y-axis. Supports all valueAxis options.
zoomable	boolean | Zoomable		Specifies if the Chart can be zoomed. Zooming is not available for the Donut, Pie, Funnel, Pyramid, Polar, and Radar series.

Fields

Name	Type	Default	Description
surface	Surface		The Drawing Surface of the Chart.

Events

Name	Type	Description
axisLabelClick	EventEmitter<AxisLabelClickEvent>	Fires when the user clicks an axis label (see example).
drag	EventEmitter<DragEvent>	Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
dragEnd	EventEmitter<DragEndEvent>	Fires when the user stops dragging the Chart.
dragStart	EventEmitter<DragStartEvent>	Fires when the user starts dragging the Chart.
drilldown	EventEmitter<DrilldownEvent>	Fires when the user when the user wants to drill down on a specific point.
drilldownLevelChange	EventEmitter<number>	Fires when the drill-down level has changed.
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 the user hovers over a legend item (see example).
legendItemLeave	EventEmitter<LegendItemLeaveEvent>	Fires when the cursor leaves a legend item.
noteClick	EventEmitter<NoteClickEvent>	Fires when the user clicks a note.
noteHover	EventEmitter<NoteHoverEvent>	Fires when the user hovers over a note.
noteLeave	EventEmitter<NoteLeaveEvent>	Fires when the cursor leaves a note.
paneRender	EventEmitter<PaneRenderEvent>	Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options. The event is used to render custom visuals in the panes.
plotAreaClick	EventEmitter<PlotAreaClickEvent>	Fires when the user clicks the plot area (see example). 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 (see example).
plotAreaLeave	EventEmitter<PlotAreaLeaveEvent>	Fires when the cursor leaves the plot area.
render	EventEmitter<RenderEvent>	Fires when the Chart is ready to render on screen (see example). For example, you can use it to remove loading indicators. Any changes made to the options are ignored.
select	EventEmitter<SelectEvent>	Fires when the user modifies the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
selectEnd	EventEmitter<SelectEndEvent>	Fires when the user completes the modification of the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
selectStart	EventEmitter<SelectStartEvent>	Fires when the user starts modifying the axis selection. The range units include a generic axis category index (0-based) and a date axis represented by a 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 (see example). To distinguish between the original events, inspect the e.originalEvent.type field.
seriesHover	EventEmitter<SeriesHoverEvent>	Fires when the user hovers the Chart series (see example).
seriesLeave	EventEmitter<SeriesLeaveEvent>	Fires when the cursor leaves a series.
seriesOver	EventEmitter<SeriesOverEvent>	Fires when the cursor enters a 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<string> 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 ChartSVGExportOptions The parameters for the exported file.
Returns Promise<string> A promise that will be resolved with an SVG document that is 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 plot area of the Chart.
Returns ChartPlotArea The plot area of the Chart.

hideTooltip
Hides the tooltip of the Chart.

notifyChanges
Updates the component fields with the specified values and refreshes the Chart. Use this method when the configuration values cannot be set through the template. ts chart.notifyChanges({ title: { text: 'New Title' } });
Parameters changes any An object containing the updated input fields.

reloadTheme
Reloads the Chart appearance settings from the current Kendo UI Theme. Call this method after loading a different theme stylesheet.

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 Chart tooltip of a specific point or the shared tooltip of a specific category.
Parameters filter string | number | 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
Highlights the series points or the segments of a Pie, Donut, Funnel or Pyramid charts. See Series Highlight for more details (with an example).
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.