ChartComponent
Represents the Kendo UI Chart component for Angular.
Definition
Package:@progress/kendo-angular-charts
Selector:kendo-chart
Export Name:Accessible in templates as #kendoChartInstance="kendoChart"
Syntax:
<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>Inputs
Defines the default options for all Chart axes. Accepts the options which are supported by
categoryAxis,
valueAxis,
xAxis,
and yAxis.
Defines the configuration options of the category axis.
Defines 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 has no effect.
noData
boolean
If no series are defined, or all series are empty, a No Data Overlay will be displayed. It clears automatically when the series receive data.
To disable the No Data Overlay, set this option to false.
true
Chart configuration options.
This property allows configuring the chart declaratively through a single object,
as an alternative (or in addition) to using the nested configuration components
(e.g., kendo-chart-series, kendo-chart-category-axis, kendo-chart-legend, etc.). When both are used,
the values set through the nested components take precedence and will override the
matching options provided here.
Defines the default options of all panes.
Defines 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.
Axes 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
Defines whether the Chart can be panned.
Panning is not available for the Donut, Pie, Funnel, Pyramid, Polar, and Radar series.
false
Defines the configuration options of the plot area. Specifies the area which displays the series.
Defines the settings for the tooltip popup.
renderAs
"svg" | "canvas"
Defines the preferred rendering engine. If the browser does not support it, the Chart switches to the first available mode.
'svg'
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.
To disable the automatic resizing, set it to 0.
10
Defines the configuration of the Chart series.
Determines the series type 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[]
Defines the default colors for the Chart series. When all colors are used, new colors are pulled from the start again.
Defines the default options of all series.
Defines the configuration options of the Chart series tooltips.
Displays the tooltip when the
tooltip.visible option is set to true.
transitions
boolean
Defines whether the Chart plays animations when it displays the series. By default, animations are enabled.
true
Defines the configuration options of the Scatter Chart X-axis.
Supports all valueAxis options.
Defines the configuration options of the Scatter Chart Y-axis.
Supports all valueAxis options.
Fields
surface
Surface
Represents the Drawing Surface of the Chart.
Events
axisLabelClick
EventEmitter<AxisLabelClickEvent>
Fires when you click an axis label (see example).
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.
zoomEnd
EventEmitter<ZoomEndEvent>
Fires when you stop zooming the Chart.
zoomStart
EventEmitter<ZoomStartEvent>
Fires when you use the mousewheel to zoom the Chart.
Methods
Exports the Chart as an image. The export operation is asynchronous and returns a promise.
The parameters for the exported image.
Returns:Promise<string>
A promise that resolves with a PNG image encoded as a Data URI.
Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise.
The parameters for the exported file.
Returns:Promise<string>
A promise that resolves with an SVG document encoded as a Data URI.
Exports the Chart as a Drawing Scene.
The parameters for the export operation.
Returns:Group
The root Group of the scene.
Returns the axis with the specified name.
Returns the pane at the specified index.
Returns the pane with the specified name.
Returns the plot area of the Chart.
The plot area of the Chart.
Hides the tooltip of the Chart.
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.
An object containing the updated input fields.
Reloads the Chart appearance settings from the current Kendo UI Theme.
Call this method after loading a different theme stylesheet.
Detects the size of the container and redraws the Chart.
Resizing is automatic unless you set the resizeRateLimit option to 0.
Shows the Chart tooltip of a specific point or the shared tooltip of a specific category.
The category for a shared tooltip or a function which will be called for each point until the function returns true.
Highlights the series points or the segments of a Pie, Donut, Funnel, or Pyramid Charts.
See Series Highlight for more details (with an example).
A Boolean value that indicates whether the highlight is shown or hidden.
filterstring | { category: string; series: string } | (point: SeriesPoint) => booleanA 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.