Chart

Example

Razor

<kendo-chart>
    <axis-defaults></axis-defaults>
    <category-axis></category-axis>
    <chart-area></chart-area>
    <chart-legend></chart-legend>
    <chart-subtitle></chart-subtitle>
    <chart-title></chart-title>
    <datasource></datasource>
    <messages />
    <no-data></no-data>
    <pane-defaults></pane-defaults>
    <panes></panes>
    <pannable />
    <pdf></pdf>
    <plot-area></plot-area>
    <series />
    <series-defaults></series-defaults>
    <tooltip></tooltip>
    <value-axis></value-axis>
    <x-axis></x-axis>
    <y-axis></y-axis>
    <zoomable></zoomable>
</kendo-chart>

ChildTags

Tag Name	Details
axis-defaults	ChartAxisDefaultsSettingsTagHelper
category-axis	ChartCategoryAxisTagHelperCollection
chart-area	ChartChartAreaSettingsTagHelper
chart-legend	ChartLegendSettingsTagHelper
chart-subtitle	ChartSubtitleSettingsTagHelper
chart-title	ChartTitleSettingsTagHelper
datasource	DataSourceTagHelper
messages	ChartMessagesSettingsTagHelper
no-data	ChartNoDataSettingsTagHelper
pane-defaults	ChartPaneDefaultsSettingsTagHelper
panes	ChartPanesTagHelper
pannable	ChartPannableSettingsTagHelper
pdf	ChartPdfSettingsTagHelper
plot-area	ChartPlotAreaSettingsTagHelper
series	ChartSeriesTagHelperCollection
series-defaults	ChartSeriesDefaultsSettingsTagHelper
tooltip	ChartTooltipSettingsTagHelper
value-axis	ChartValueAxisTagHelperCollection
x-axis	ChartXAxisTagHelperCollection
y-axis	ChartYAxisTagHelperCollection
zoomable	ChartZoomableSettingsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
auto-bind	Boolean	If set to false the widget 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 widget will bind to the data source specified in the configuration.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
datasource-id	String	The Id of the data source.
on-axis-label-click	String	The name of the JavaScript function that will handle the axisLabelClick event. Fired when the user clicks an axis label.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-drag	String	The name of the JavaScript function that will handle the drag event. Fired as long as the user is dragging the chart using the mouse or swipe gestures.The event handler function context (available via the this keyword) will be set to the widget instance.
on-drag-end	String	The name of the JavaScript function that will handle the dragEnd event. Fired when the user stops dragging the chart.The event handler function context (available via the this keyword) will be set to the widget instance.
on-drag-start	String	The name of the JavaScript function that will handle the dragStart event. Fired when the user starts dragging the chart.The event handler function context (available via the this keyword) will be set to the widget instance.
on-drilldown	String	The name of the JavaScript function that will handle the drilldown event. Fires when the user when the user wants to drill down on a specific point.The event handler function context (available via the this keyword) will be set to the widget instance.
on-drilldown-level-change	String	The name of the JavaScript function that will handle the drilldownLevelChange event. Fires when the drill-down level has changed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-legend-item-click	String	The name of the JavaScript function that will handle the legendItemClick event. Fires when an legend item is clicked, before the selected series visibility is toggled. Can be cancelled.
on-legend-item-hover	String	The name of the JavaScript function that will handle the legendItemHover event. Fires when an legend item is hovered.
on-legend-item-leave	String	The name of the JavaScript function that will handle the legendItemLeave event. Fires when the cursor leaves a legend item.
on-note-click	String	The name of the JavaScript function that will handle the noteClick event. Fired when the user clicks one of the notes.The event handler function context (available via the this keyword) will be set to the widget instance.
on-note-hover	String	The name of the JavaScript function that will handle the noteHover event. Fired when the user hovers one of the notes.The event handler function context (available via the this keyword) will be set to the widget instance.
on-note-leave	String	The name of the JavaScript function that will handle the noteLeave event. Fired when the cursor leaves a note.The event handler function context (available via the this keyword) will be set to the widget instance.
on-pane-render	String	The name of the JavaScript function that will handle the paneRender event. Fires when a pane is rendered because the chart is rendered, or the chart performs panning or zooming, or because the chart is exported with different options. The event can be used to render custom visuals in the panes.
on-plot-area-click	String	The name of the JavaScript function that will handle the plotAreaClick event. Fired when the user clicks the plot area.
on-plot-area-hover	String	The name of the JavaScript function that will handle the plotAreaHover event. Fired when the user hovers the plot area.
on-plot-area-leave	String	The name of the JavaScript function that will handle the plotAreaLeave event. Fired when the cursor leaves the plotArea.
on-render	String	The name of the JavaScript function that will handle the render event. Fired when the chart is ready to render on screen.Can be used, for example, to remove loading indicators.The event handler function context (available via the this keyword) will be set to the widget instance.
on-select	String	The name of the JavaScript function that will handle the select event. Fired when the user modifies the selection.The range units are: Generic axis - Category index (0-based) or Date axis - Date instance. The event handler function context (available via the this keyword) will be set to the widget instance.
on-select-end	String	The name of the JavaScript function that will handle the selectEnd event. Fired when the user completes modifying the selection.The range units are: Generic axis - Category index (0-based) or Date axis - Date instance. The event handler function context (available via the this keyword) will be set to the widget instance.
on-select-start	String	The name of the JavaScript function that will handle the selectStart event. Fired when the user starts modifying the axis selection.The range units are: Generic axis - Category index (0-based) or Date axis - Date instance. The event handler function context (available via the this keyword) will be set to the widget instance.
on-series-click	String	The name of the JavaScript function that will handle the seriesClick event. Fired when the user clicks the chart series.
on-series-hover	String	The name of the JavaScript function that will handle the seriesHover event. Fired when the user hovers the chart series.The event handler function context (available via the this keyword) will be set to the widget instance.
on-series-leave	String	The name of the JavaScript function that will handle the seriesLeave event. Fired when the cursor leaves a chart series.
on-series-over	String	The name of the JavaScript function that will handle the seriesOver event. Fired when the cursor is over the chart series.
on-zoom	String	The name of the JavaScript function that will handle the zoom event. Fired as long as the user is zooming the chart using the mousewheel.The event handler function context (available via the this keyword) will be set to the widget instance.
on-zoom-end	String	The name of the JavaScript function that will handle the zoomEnd event. Fired when the user stops zooming the chart.The event handler function context (available via the this keyword) will be set to the widget instance.
on-zoom-start	String	The name of the JavaScript function that will handle the zoomStart event. Fired when the user uses the mousewheel to zoom the chart.The event handler function context (available via the this keyword) will be set to the widget instance.
persist-series-visibility	Boolean	Specifies if the series visible option should be persisted when changing the dataSource data.
render-as	RenderingMode	Specifies the preferred widget rendering mode.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
series-colors	String[]	The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
theme	String	Specifies the chart theme to be used. The recomended value is sass.Note: Since Q2 2024 release, the default value for the theme property is sass instead of default.With versions prior to R1 2023 this can be either the respective LESS theme from the list below or "sass". When set to "sass" the chart will read the variables from the Sass-based themes.The supported values prior to and including 2023.1.117 version are: "sass"; "black"; "blueopal"; "bootstrap"; "default"; "fiori"; "flat"; "highcontrast"; "material"; "materialblack"; "metro"; "metroblack"; "moonlight"; "nova"; "office365"; "silver" or "uniform".
transitions	Boolean	If set to true the chart will play animations when displaying the series. By default animations are enabled.