Chart

Directive

kendo-chart

Child Components

• kendo-chart-series-item

Props

auto-bind Boolean

If auto-bind is set to false, the Chart will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default, the Chart will bind to the data source that is specified in the configuration (autoBind in Kendo UI for jQuery).

axis-defaults Object

The default options for all Chart axes (axisDefaults in Kendo UI for jQuery). Accepts the options supported by categoryAxis, valueAxis, xAxis, and yAxis. The supported composite props are available in AxisDefaultsProps.

category-axis Array | Object

The configuration options for the category axis (categoryAxis in Kendo UI for jQuery). The supported composite props are available in CategoryAxisProps.

chart-area Object

The configuration options of the Chart area (chartArea in Kendo UI for jQuery). Represents the entire visible area of the Chart. The supported composite props are available in ChartAreaProps.

data-source Object | Array

The data source of the Chart which is used to display the series (dataSource in Kendo UI for jQuery).

You can set data-source to:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or an array, the Chart will initialize a new kendo.data.DataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.DataSource instance, the Chart will use that instance and will not initialize a new one.

legend Object

The configuration options for the Chart legend (legend in Kendo UI for jQuery). The supported composite props are available in LegendProps.

panes Array

The Chart panes configuration (panes in Kendo UI for jQuery).

Panes split the Chart into two 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. Axes that do not have specified pane are placed in the top (default) pane. Series are moved to the desired pane by associating them with an axis. The supported composite props are available in PanesProps.

pannable Boolean | Object

Specifies if the Chart can be panned (pannable in Kendo UI for jQuery). The supported composite props are available in PannableProps.

pdf Object

Configures the export settings for the saveAsPDF method (pdf in Kendo UI for jQuery). The supported composite props are available in PdfProps.

persist-series-visibility Boolean

Specifies if the series visible option will be persisted when the dataSource data changes (persistSeriesVisibility in Kendo UI for jQuery).

plot-area Object

The configuration options for the plot area (plotArea in Kendo UI for jQuery).

The plot area is the area which displays the series. The supported composite props are available in PlotAreaProps.

render-as String

Sets the preferred rendering engine (renderAs in Kendo UI for jQuery). If render-as is not supported by the browser, the Chart will switch to the first available mode.

The supported values are:

• svg—Renders the Chart as an inline SVG document if available.
• canvas—Renders the Chart as a canvas element if available.

series Array

The configuration of the chart series (series in Kendo UI for jQuery).

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.

series-colors Array

The default colors for the Chart series (seriesColors in Kendo UI for jQuery). When all the colors are used, the colors start over again.

series-defaults Object

The default options for all series (seriesDefaults in Kendo UI for jQuery). The supported composite props are available in SeriesDefaultsProps.

theme String

The theme of the Chart (theme in Kendo UI for jQuery).

theme can be either a built-in theme or a sass theme. When theme is set to sass, the Chart will read the variables from the SASS-based themes.

The supported values are:

• sass—A special value.
• black
• blueopal
• bootstrap
• default
• highcontrast
• metro
• metroblack
• moonlight
• silver
• uniform

title String | Object

The configuration options for the Chart title or text (title in Kendo UI for jQuery). The supported composite props are available in TitleProps.

tooltip Object

The configuration options for the tooltip of the Chart series (tooltip in Kendo UI for jQuery). The supported composite props are available in TooltipProps.

transitions Boolean

If transitions is set to true, the Chart will play animations when it displays the series (transitions in Kendo UI for jQuery). By default, animations are enabled.

value-axis Array | Object

The configuration options for the value axis (valueAxis in Kendo UI for jQuery). The supported composite props are available in ValueAxisProps.

x-axis Array

The configuration options for the X-axis of the Scatter Chart X-axis (xAxis in Kendo UI for jQuery). Supports all valueAxis options. The supported composite props are available in XAxisProps.

y-axis Array

The configuration options for the Y-axis of the Scatter Chart (yAxis in Kendo UI for jQuery). Supports all valueAxis options. The supported composite props are available in YAxisProps.

zoomable Boolean | Object

Specifies if the Chart can be zoomed (zoomable in Kendo UI for jQuery). The supported composite props are available in ZoomableProps.

Events

axislabelclick: Function

Fires when the user clicks an axis label (axisLabelClick in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

databound: Function

Fires when the Chart is bound to data from its data source (dataBound in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

drag: Function

Fires as long as the user is dragging the Chart by using the mouse or by swiping (drag in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

dragend: Function

Fires when the user stops dragging the Chart (dragEnd in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

dragstart: Function

Fires when the user starts dragging the Chart (dragStart in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

legenditemclick: Function

Fires when a legend item is clicked and before the selected series visibility is toggled (legendItemClick in Kendo UI for jQuery). Can be cancelled.

legenditemhover: Function

Fires when a legend item is hovered (legendItemHover in Kendo UI for jQuery).

legenditemleave: Function

Fires when the cursor leaves a legend item (legendItemLeave in Kendo UI for jQuery).

noteclick: Function

Fires when the user clicks a note (noteClick in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

notehover: Function

Fires when the user hovers over a note (noteHover in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

noteleave: Function

Fires when the cursor leaves a note (noteLeave in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

panerender: Function

Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options (paneRender in Kendo UI for jQuery). You can use panerender to render custom visuals in the panes.

plotareaclick: Function

Fires when the user clicks the plot area (plotAreaClick in Kendo UI for jQuery).

plotareahover: Function

Fires when the user hovers over the plot area (plotAreaHover in Kendo UI for jQuery).

plotarealeave: Function

Fires when the cursor leaves the plot area (plotAreaLeave in Kendo UI for jQuery).

render: Function

Fires when the Chart is ready to render on-screen (render in Kendo UI for jQuery). For example, render can be used to remove loading indicators. The event handler function context, which is available through the this keyword, will be set to the Chart instance.

select: Function

Fires when the user modifies the selection (select in Kendo UI for jQuery).

The supported range units are:

• Generic axis—A category index (0-based).
• Date axis—A date instance.

The event handler function context, which is available through the this keyword, will be set to the Chart instance.

selectend: Function

Fires when the user completes modifying the selection (selectEnd in Kendo UI for jQuery).

The supported range units are:

• Generic axis—A category index (0-based).
• Date axis—A date instance.

The event handler function context, which is available through the this keyword, will be set to the Chart instance.

selectstart: Function

Fires when the user starts modifying the axis selection (selectStart in Kendo UI for jQuery).

The supported range units are:

• Generic axis—A category index (0-based).
• Date axis—A date instance.

The event handler function context, which is available through the this keyword, will be set to the Chart instance.

seriesclick: Function

Fires when the user clicks the Chart series (seriesClick in Kendo UI for jQuery).

serieshover: Function

Fires when the user hovers over the Chart series (seriesHover in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

seriesover: Function

Fires when the cursor is over the Chart series (seriesOver in Kendo UI for jQuery).

seriesleave: Function

Fires when the cursor leaves a Chart series (seriesLeave in Kendo UI for jQuery).

zoom: Function

Fires as long as the user is zooming the Chart with the mouse (zoom in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

zoomend: Function

Fires when the user stops zooming the Chart (zoomEnd in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

zoomstart: Function

Fires when the user uses the mouse to zoom the Chart (zoomStart in Kendo UI for jQuery). The event handler function context, which is available through the this keyword, will be set to the Chart instance.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI Chart instance.