Crosshairs

The Chart crosshairs are lines which are perpendicular to the axes and enable the user to see the exact value at the current cursor position.

To enable the crosshair for an axis, either:

  • Add the corresponding crosshair component, or
  • Set the crosshair.visible option to true.

The following example demonstrates how to enable the crosshairs.

Example
View Source
Edit In Stackblitz  
Change Theme:

Current Cursor Values

To get the current hovered values, use the onPlotAreaHover event.

The following example demonstrates how to get the hovered values.

import {
    Chart,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 2, 3];
const categories = ['A', 'B', 'C'];
const crosshair = {
    visible: true,
    tooltip: {
        visible: true,
        format: '#.##'
    }
};
const onPlotAreaHover = (args) => {
    console.log(`Category: ${ args.category }`);
    console.log(`Value: ${ args.value }`);
}

const ChartContainer = () => (
    <Chart onPlotAreaHover={onPlotAreaHover}>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories} crosshair={crosshair} />
        </ChartCategoryAxis>
        <ChartValueAxis>
            <ChartValueAxisItem crosshair={crosshair} />
        </ChartValueAxis>
        <ChartSeries>
            <ChartSeriesItem data={data} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

In this article

Not finding the help you need?