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.

import {
    Chart,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartCategoryAxisCrosshair,
    ChartCategoryAxisCrosshairTooltip,
    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 ChartContainer = () => (
    <Chart>
        <ChartCategoryAxis>
            <ChartCategoryAxisItem categories={categories}>
                <ChartCategoryAxisCrosshair>
                    <ChartCategoryAxisCrosshairTooltip />
                </ChartCategoryAxisCrosshair>
            </ChartCategoryAxisItem>
        </ChartCategoryAxis>
        <ChartValueAxis>
            <ChartValueAxisItem crosshair={crosshair} />
        </ChartValueAxis>
        <ChartSeries>
            <ChartSeriesItem data={data} />
        </ChartSeries>
    </Chart>
);

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

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')
);
 /