Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

ChartProps

Represents the props of the KendoReact Chart component.

NameTypeDefaultDescription

axisDefaults?

AxisDefaults

This option allows to override the default axis options.

className?

string

Sets additional CSS classes to the component.

dir?

string

Represents the dir HTML attribute.

paneDefaults?

PaneDefaults

This option allows to override the default pane options.

panes?

Pane[]

The chart panes configuration.

pannable?

boolean | DragAction

Specifies if the Chart can be panned (see example).

renderAs?

"canvas" | "svg"

Sets the preferred rendering engine (see example). 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.

seriesColors?

string[]

The default colors for the Chart series. When all colors are used, new colors are pulled from the start again.

seriesDefaults?

SeriesDefaults

This option allows to override the default series options.

style?

React.CSSProperties

The styles that are applied to the component.

transitions?

boolean

If set to true, the Chart plays animations when it displays the series. By default, animations are enabled.

zoomable?

boolean | Zoomable

Specifies if the Chart can be zoomed (see example).

Methods

donutCenterRender

When set, the prop is used to render the Donut Center template.

Returns

ReactElement<any>

onAxisLabelClick

Fires when the user clicks an axis label.

Parameters

event

AxisLabelClickEvent

onDrag

Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.

Parameters

event

DragEvent

onDragEnd

Fires when the user stops dragging the Chart.

Parameters

event

DragEndEvent

onDragStart

Fires when the user starts dragging the Chart.

Parameters

event

DragStartEvent

onLegendItemClick

Fires when the user clicks a legend item (see example).

Parameters

event

LegendItemClickEvent

onLegendItemHover

Fires when the user hovers over a legend item.

Parameters

event

LegendItemHoverEvent

onNoteClick

Fires when the user clicks a note.

Parameters

event

NoteClickEvent

onNoteHover

Fires when the user hovers over a note.

Parameters

event

NoteHoverEvent

onPlotAreaClick

Fires when the user clicks the plot area. The click event is triggered by the tap and contextmenu events. To distinguish between the original events, inspect the e.originalEvent.type field.

Parameters

event

PlotAreaClickEvent

onPlotAreaHover

Fires when the user hovers the plot area (see example).

Parameters

event

PlotAreaHoverEvent

onRefresh

Fires when the Chart is about to refresh. The event can be used to prevent the refresh of the Chart in specific cases (see example.

Parameters

chartOptions

any

themeOptions

any

chartInstance

any

onRender

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.

Parameters

event

RenderEvent

onSelect

Fires when the user modifies the selection.

The range units are:

  • Generic axisCategory index (0-based).
  • Date axisDate instance.
Parameters

event

SelectEvent

onSelectEnd

Fires when the user completes the modification of the selection (see example).

The range units are:

  • Generic axisCategory index (0-based).
  • Date axisDate instance.
Parameters

event

SelectEndEvent

onSelectStart

Fires when the user starts modifying the axis selection.

The range units are:

  • Generic axisCategory index (0-based).
  • Date axisDate instance.
Parameters

event

SelectStartEvent

onSeriesClick

Fires when the user clicks the Chart series.

The click event will be triggered by the tap and contextmenu events. To distinguish between the original events, inspect the e.originalEvent.type field.

Parameters

event

SeriesClickEvent

onSeriesHover

Fires when the user hovers over the Chart series.

Parameters

event

SeriesHoverEvent

onZoom

Fires as long as the user is zooming the Chart by using the mousewheel operation.

Parameters

event

ZoomEvent

onZoomEnd

Fires when the user stops zooming the Chart.

Parameters

event

ZoomEndEvent

onZoomStart

Fires when the user uses the mousewheel to zoom the Chart.

Parameters

event

ZoomStartEvent