New to Kendo UI for AngularStart a free 30-day trial

ChartComponent

Represents the Kendo UI Chart component for Angular.

html
<kendo-chart>
  <kendo-chart-legend [visible]="legendVisible">
  </kendo-chart-legend>
  <kendo-chart-series>
    <kendo-chart-series-item name="Series #1" type="line" [data]="[1, 2, 3]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

Selector

kendo-chart

Export Name

Accessible in templates as #kendoChartInstance="kendoChart"

Inputs

NameTypeDefaultDescription

axisDefaults

AxisDefaults

Defines the default configuration for all axes.

categoryAxis

CategoryAxis | CategoryAxis[]

Defines the category axis configuration.

chartArea

ChartArea

Defines the Chart area configuration.

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 has no effect.

legend

Legend

Defines the Chart legend configuration.

noData

boolean

true

Defines whether to show the no-data template when the Chart has no data.

paneDefaults

PaneDefaults

Defines the default configuration for all panes.

panes

Pane[]

Defines the Chart panes configuration.

pannable

boolean | DragAction

false

Defines whether the Chart can be panned. Panning is not available for the Donut, Pie, Funnel, Pyramid, Polar, and Radar series.

plotArea

PlotArea

Defines the plot area configuration.

popupSettings

PopupSettings

Defines the settings for the tooltip popup.

renderAs

"canvas" | "svg"

'svg'

Defines the rendering mode of the Chart.

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. To disable the automatic resizing, set it to 0.

series

Series[]

Defines the Chart series configuration.

seriesColors

string[]

Defines the default colors for the Chart series.

seriesDefaults

SeriesDefaults

Defines the default configuration for all series.

subtitle

string | Subtitle

Defines the subtitle configuration of the Chart.

title

string | Title

Defines the title configuration of the Chart.

tooltip

Tooltip

Defines the Chart tooltip configuration.

transitions

boolean

true

Defines whether the Chart plays animations when it displays the series. By default, animations are enabled.

valueAxis

ValueAxis | ValueAxis[]

Defines the value axis configuration.

xAxis

XAxis | XAxis[]

Defines the X axis configuration.

yAxis

YAxis | YAxis[]

Defines the Y axis configuration.

zoomable

boolean | Zoomable

Defines the zoom configuration of the Chart.

Fields

NameTypeDefaultDescription

surface

Surface

Represents the Drawing Surface of the Chart.

Events

NameTypeDescription

axisLabelClick

EventEmitter<AxisLabelClickEvent>

Fires when you click an axis label (see example).

drag

EventEmitter<DragEvent>

Fires as long as you drag the Chart with the mouse or through swipe gestures.

dragEnd

EventEmitter<DragEndEvent>

Fires when you stop dragging the Chart.

dragStart

EventEmitter<DragStartEvent>

Fires when you start dragging the Chart.

drilldown

EventEmitter<DrilldownEvent>

Fires when you want 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. You can prevent this event.

legendItemHover

EventEmitter<LegendItemHoverEvent>

Fires when you hover over a legend item (see example).

legendItemLeave

EventEmitter<LegendItemLeaveEvent>

Fires when the cursor leaves a legend item.

noteClick

EventEmitter<NoteClickEvent>

Fires when you click a note.

noteHover

EventEmitter<NoteHoverEvent>

Fires when you hover 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 you click 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 you hover 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 you modify 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 you complete 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 you start 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 you click 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 you hover 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 you zoom the Chart by using the mousewheel operation.

zoomEnd

EventEmitter<ZoomEndEvent>

Fires when you stop zooming the Chart.

zoomStart

EventEmitter<ZoomStartEvent>

Fires when you use 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 resolves 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 resolves with an 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 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.

In this article
SelectorExport NameInputsFieldsEventsMethods
Not finding the help you need?
Contact Support