Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
- Animation
- Buttons
- Chartsupdated
- - Overview
  - Sankeynew
  - Data Binding
  - Globalization
  - Chart Elements
  - - Axes
    - Chart Area
    - Crosshairs
    - Error Bars
    - Labels
    - Legend
    - Notes
    - Panes
    - Plot Area
    - Plot Bands
    - Selection
    - Series
    - Title
    - Tooltips
    - Trendlines
  - Chart Features
  - Area
  - Bar
  - Box Plot
  - Bubble
  - Bullet
  - Donut
  - Funnel
  - Line
  - Pie
  - Polar
  - Pyramid
  - Radar
  - Range Area
  - Range Bar
  - Scatter
  - Sparkline
  - StockChart
  - Waterfall
  - Glossary
  - Troubleshooting
  - Events
  - API
- Conversational UI
- Data Tools
- Date Inputs
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Charts / Chart Elements / Crosshairs /

New to Kendo UI for Vue? Start a free 30-day trial

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

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.

Example

View Source

Change Theme:

Suggested Links