@progress/kendo-react-charts

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { AxisLabelClickEvent, DragEvent, DragStartEvent, DragEndEvent, DrilldownEvent, LegendItemClickEvent, LegendItemHoverEvent, NoteClickEvent, NoteHoverEvent, PlotAreaClickEvent, PlotAreaHoverEvent, RenderEvent, SeriesClickEvent, SeriesHoverEvent, ZoomEvent, ZoomStartEvent, ZoomEndEvent, SelectEvent, SelectStartEvent, SelectEndEvent } from './common/events.js'; import { AxisDefaults, DragAction, Pane, PaneDefaults, SeriesDefaults, Zoomable } from './common/property-types.js'; import { Charts } from './common/charts.js'; import { ChartDrilldownState } from './common/api-types.js'; /** * @hidden */ export interface BaseChartPrivateProps extends BaseChartProps { /** * @hidden */ deriveOptionsFromParent?: (options: any) => any; /** * @hidden */ chartConstructor: any; /** * @hidden */ wrapper: string; /** * @hidden */ getTarget: () => Charts; /** * @hidden */ data?: any; } /** * @hidden */ export interface BaseChartProps { /** * Represents the `dir` HTML attribute. */ dir?: string; /** * The styles that are applied to the component. */ style?: React.CSSProperties; /** * Sets additional CSS classes to the component. */ className?: string; /** * @hidden */ children?: any; /** * Gets or sets the current drill-down state for [Drilldown Charts](https://www.telerik.com/kendo-react-ui/components/charts/drill-down). * * To return to a previous level, remove the items from the `steps` array following the desired level. * To return to the root chart, set the `steps` array to `[]`. */ drilldownState?: ChartDrilldownState; /** * Sets the preferred rendering engine ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/rendering)). 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. */ renderAs?: 'svg' | 'canvas'; /** * Specifies if the Chart can be panned ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/pan-zoom)). */ pannable?: boolean | DragAction; /** * Specifies if the Chart can be zoomed ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/pan-zoom)). Currently is only applicable to linear types, where the range on the X axis can be changed based on the zoom level. */ zoomable?: boolean | Zoomable; /** * The default colors for the Chart series. When all colors are used, new colors are pulled from the start again. */ seriesColors?: string[]; /** * If set to `true`, the Chart plays animations when it displays the series. By default, animations are enabled. */ transitions?: boolean; /** * This option allows to override the default pane options. */ paneDefaults?: PaneDefaults; /** * The chart panes configuration. */ panes?: Pane[]; /** * This option allows to override the default series options. */ seriesDefaults?: SeriesDefaults; /** * This option allows to override the default axis options. */ axisDefaults?: AxisDefaults; /** * @hidden * Defines whether the Chart automatically repaints when its styles are modified through CSS variables. */ observeStyles?: boolean; /** * Fires when the user clicks an axis label. */ onAxisLabelClick?: (event: AxisLabelClickEvent) => void; /** * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures. */ onDrag?: (event: DragEvent) => void; /** * Fires when the user stops dragging the Chart. */ onDragEnd?: (event: DragEndEvent) => void; /** * Fires when the user starts dragging the Chart. */ onDragStart?: (event: DragStartEvent) => void; /** * Fires when the user when the user wants to drill down on a specific point. */ onDrilldown?: (event: DrilldownEvent) => void; /** * Fires when the user hovers over a legend item. */ onLegendItemHover?: (event: LegendItemHoverEvent) => void; /** * Fires when the user clicks a legend item ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/legend#toc-clicking-legend-items)). */ onLegendItemClick?: (event: LegendItemClickEvent) => void; /** * Fires when the user clicks a note. */ onNoteClick?: (event: NoteClickEvent) => void; /** * Fires when the user hovers over a note. */ onNoteHover?: (event: NoteHoverEvent) => void; /** * 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. */ onPlotAreaClick?: (event: PlotAreaClickEvent) => void; /** * Fires when the user hovers the plot area ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/crosshairs#toc-current-cursor-values)). */ onPlotAreaHover?: (event: PlotAreaHoverEvent) => void; /** * Fires when the Chart is ready to render on screen ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/plot-bands#toc-custom-plot-bands)). For example, you can use it to remove loading indicators. Any changes made to the options are ignored. */ onRender?: (event: RenderEvent) => void; /** * 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](https://www.telerik.com/kendo-react-ui/components/charts/chart/chart-refresh). */ onRefresh?: (chartOptions: any, themeOptions: any, chartInstance: any) => void; /** * Fires when the user modifies the selection. * * The range units are: * - Generic axis—Category index (0-based). * - Date axis—Date instance. */ onSelect?: (event: SelectEvent) => void; /** * Fires when the user completes the modification of the selection ([see example](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/selection#toc-using-selection-as-navigator)). * * The range units are: * - Generic axis—Category index (0-based). * - Date axis—Date instance. */ onSelectEnd?: (event: SelectEndEvent) => void; /** * Fires when the user starts modifying the axis selection. * * The range units are: * - Generic axis—Category index (0-based). * - Date axis—Date instance. */ onSelectStart?: (event: SelectStartEvent) => void; /** * 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. */ onSeriesClick?: (event: SeriesClickEvent) => void; /** * Fires when the user hovers over the Chart series. */ onSeriesHover?: (event: SeriesHoverEvent) => void; /** * Fires as long as the user is zooming the Chart by using the mousewheel operation. */ onZoom?: (event: ZoomEvent) => void; /** * Fires when the user stops zooming the Chart. */ onZoomEnd?: (event: ZoomEndEvent) => void; /** * Fires when the user uses the mousewheel to zoom the Chart. */ onZoomStart?: (event: ZoomStartEvent) => void; }