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 in their tooltip.

Enable Crosshairs

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. The category axis uses the component to enable the crosshair and its tooltip, the value axis uses an object to define the settings for them.

Change Theme

Theme

Loading ...

Get Current Cursor Values

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

The following example demonstrates how to get the hovered values.

Change Theme

Theme

Loading ...

Support and Learning Resources

• Chart Crosshairs Homepage
• Getting Started with the Kendo UI for Angular Chart
• API Reference of the Chart
• Axes
• Chart Area
• Error Bars
• Labels
• Legend
• Notes
• Panes
• Plot Area
• Plot Bands
• Selection
• Series
• Title
• Tooltip
• Getting Started with Kendo UI for Angular (Online Guide)
• Getting Started with Kendo UI for Angular (Video Tutorial)
• Video Courses
• Chart Forum
• Before You Start: All Things Angular (Telerik Blog Post)
• Knowledge Base

Additional Resources

• Angular Blogs
• Angular Videos
• Kendo UI for Angular Roadmap