@progress/kendo-react-charts
Version:
React Chart renders a wide range of high-quality data visualizations. KendoReact Charts package
75 lines (74 loc) • 4.37 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { drawing } from '@progress/kendo-drawing';
import { Border, HighlightLine, HighlightVisualArgs, HighlightToggleArgs } from '../../common/property-types.js';
/**
* @hidden
*/
export interface SeriesHighlight {
/**
* The border of the highlighted Chart series.
*
* The color is computed automatically from the base point color. The border option is supported when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"donut"`, `"bubble"`, `"pie"`, `"candlestick"`, or `"ohlc"`.
*/
border?: Border;
/**
* The highlight color. Accepts a valid CSS color string, including hex and rgb. The color option is supported when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"donut"` or `"pie"`.
*/
color?: string;
/**
* The line of the highlighted Chart series. The color is computed automatically from the base point color. The line option is supported when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"candlestick"` or `"ohlc"`.
*/
line?: HighlightLine;
/**
* The opacity of the highlighted points. The opacity option is supported when [`series.type`](https://www.telerik.com/kendo-react-ui/components/charts/api/chartseriesitemprops#toc-type) is set to `"bubble"`, `"pie"`, or `"donut"`.
*/
opacity?: number;
/**
* The opacity of the series when another series is highlighted.
*/
inactiveOpacity?: number | string;
/**
* A function for handling the toggling of the points highlight.
*
* The available argument fields are:
* - `preventDefault`—A function that can be used to prevent the showing of the default highlight overlay.
* - `show`—A Boolean value indicating whether the highlight has to be shown.
* - `visual`—The visual element that needs to be highlighted.
* - `category`—The point category.
* - `dataItem`—The point `dataItem`.
* - `value`—The point value.
* - `series`—The point series.
*/
toggle?: (e: HighlightToggleArgs) => void;
/**
* If set to `true`, the Chart highlights the series when the user hovers over it with the mouse. By default, the highlighting of the Chart series is enabled.
*/
visible?: boolean;
/**
* A function for setting custom visuals for the point highlights.
*
* The available argument fields are:
* - `createVisual`—A function that can be used to get the default highlight visual.
* - `rect`—The geometry [`Rect`](https://www.telerik.com/kendo-react-ui/components/drawing/api/geometry/rect) that defines where the visual has to be rendered.
* - `visual`—The visual element that needs to be highlighted.
* - `options`—The point options.
* - `category`—The point category.
* - `dataItem`—The point `dataItem`.
* - `value`—The point value.
* - `sender`—The Chart instance.
* - `series`—The point series.
* - `stackValue`—The cumulative point value on the stack. Available only for the stackable series.
* - `percentage`—The point value represented as a percentage value. Available only for the Donut, Pie, and 100% stacked charts.
* - `runningTotal`—The sum of point values since the last `"runningTotal"` summary point. Available for the Waterfall series.
* - `total`—The sum of all previous series values. Available for the Waterfall series.
* - `from`—The `from` point highlight visual options. Available for the RangeArea and VerticalRangeArea series.
* - `to`—The `to` point highlight visual options. Available for the RangeArea and VerticalRangeArea series.
*/
visual?: (e: HighlightVisualArgs) => drawing.Element;
}