Components
- Barcodes
- Buttonsupdated
- Charts
- - Overview
  - Getting Started
  - Chart
  - Sparkline
  - StockChart
  - Series Types
  - Elements
  - Converting jQuery Charts to Angular
  - Globalization
  - Glossary
  - API
- Conversational UI
- Data Query
- Date Inputs
- Date Math
- Dialogsupdated
- Drawing
- Dropdowns
- Editorupdated
- Excel Export
- File Saver
- Filter
- Ganttupdated
- Gauges
- Gridupdated
- Iconsupdated
- Indicators
- Inputsupdated
- Labels
- Layoutupdated
- ListBox
- ListView
- Mapbeta
- Menus
- Navigationupdated
- Notification
- Pagerupdated
- PDF Export
- PivotGridupdated
- Popup
- ProgressBars
- Ripple
- Schedulerupdated
- ScrollView
- Sortable
- ToolBarupdated
- Tooltips
- TreeList
- TreeView
- Typography
- Uploads
- Utilities
Styling & Themes
Common Features
Project Setup
Knowledge Base
Sample Applications
FAQ
Troubleshooting
Updates
Changelogs

Components / Charts / API / ChartComponent /

New to Kendo UI for Angular? Start a free 30-day trial

ChartComponent

The root Chart component.

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	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.
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`	Specifies if the Chart can be panned.
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	`"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 component as an inline `.svg` file. `"canvas"`—If available, renders the component as a `canvas` element.
resizeRateLimit	`number`	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`. @Component({ selector: 'my-app', template: ` <kendo-chart [resizeRateLimit]="2"> <!-- ^^^^^^^^^^^^^^^^^^^^^^ Will update the size of the Chart up to two times a second. Resize the example pane or window to try it out. --> <kendo-chart-series> <kendo-chart-series-item [data]="seriesData"> </kendo-chart-series-item> </kendo-chart-series> </kendo-chart> ` }) export class AppComponent { seriesData: number[] = [1, 2, 3, 5]; }
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`	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.

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.
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. 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 are: Generic axis—Category index (0-based). Date axis—Date instance.
selectEnd	`EventEmitter<SelectEndEvent>`	Fires when the user completes the modification of 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 (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.

chart.notifyChanges({ title: { text: 'New Title' } });

Parameters
changes	`any`	An object containing the updated input fields.

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, or Funnel charts.

See Series Highlight for more details.

In the following example, the callback is evaluated for each data point. If the function returns true, the point is highlighted.

Example

View Source

Change Theme:

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

ChartComponent

In this article

Not finding the help you need?