Stock Chart Crosshairs
The Crosshairs are lines perpendicular to the axes that allow the user to see the exact value of a point at the current cursor position.
To enable the Crosshairs for the Category and/or the Value axis:
- Inside the
<StockChartCategoryAxis>include the the<StockChartCategoryAxisCrosshair>, for the<StockChartValueAxis>, include<StockChartValueAxisCrosshair>tag. - Set its
Visibleparameter totrue. - (optional) To enable tooltips for the crosshair add the
<StockChartCategoryAxisCrosshairTooltip>for theCategoryaxis andStockChartValueAxisCrosshairTooltipfor theValueaxis, and set itsVisibleparameter totrue.
Basic configuration of the Crosshairs of the Stock Chart.
Crosshair Appearance Settings
You can control the appearance of the crosshair by setting the following properties of the <StockChart*AxisName*AxisCrosshair>:
Color- set theColorproperty to a valid CSS color.Opacity- set theOpacityof the crosshair.Width- set theWidthof the crosshair.
Customize the appearance of the crosshairs
Crosshair Tooltip Template
The crosshair tooltip provides a <Template> where you can control the rendering of the tooltip. The context gives information of the FormattedValue which maps to the default rendering of the tooltip and is formatted as a string.
For the Value axis you can parse that value to the type in your model (decimal, double, etc.).
For the Category axis the FormattedValue represents the labels of the category axis.
Use the Crosshair Tooltip template to customize the value