# Crosshairs

The Chart crosshairs are lines perpendicular to the axes. They enable the user to see the exact value at the current cursor position in their tooltip. Crosshairs are available for all axis types—[Category](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent), [Value](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/valueaxiscrosshaircomponent), [X](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/xaxiscrosshaircomponent), [Y](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/yaxiscrosshaircomponent), and [Navigator](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/navigatorcategoryaxiscrosshaircomponent).

The following example demonstrates crosshairs for all axis types.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/crosshairs/overview/source.txt)

## Enabling 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/crosshairs/source.txt)

## Customizing Crosshairs

You can control the crosshair appearance through the following properties:

* [`color`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent#color)—Specifies the color of the crosshair.
* [`dashType`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent#dashType)—Defines the dash type of the crosshair. The default value is `solid`.
* [`width`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent#width)—Sets the width of the crosshair in pixels. The default value is `1`.
* [`opacity`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent#opacity)—Specifies the opacity of the crosshair. By default, the crosshair is opaque.
* [`tooltip`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/categoryaxiscrosshaircomponent#tooltip)—Configures the tooltip of the crosshair.

The following example demonstrates how to customize the crosshairs.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/crosshairs/customization/source.txt)

## Getting Current Cursor Values

To get the current hovered values, use the [`plotAreaHover`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#plotareahover) event.

The following example demonstrates how to get the hovered values.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/crosshairs/cursor-values/source.txt)

## Support and Learning Resources

* [Chart Crosshairs Homepage](https://www.telerik.com/kendo-angular-ui/charts#crosshairs)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)