Skip to content

Commit 2c088a8

Browse files
vveesseelliinnaavveesseelliinnaa
committed
docs(htmlchart): Add new Crosshair article
1 parent 231d229 commit 2c088a8

File tree

2 files changed

+88
-0
lines changed

2 files changed

+88
-0
lines changed

‎controls/htmlchart/functionality/crosshair.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Crosshairs
3+
page_title: Crosshairs | RadHtmlChart for ASP.NET AJAX Documentation
4+
description: Crosshairs
5+
slug: htmlchart/functionality/crosshairs
6+
tags: crosshairs, crosshair, cross-hair, cross hair
7+
published: True
8+
position: 8
9+
---
10+
11+
# Crosshairs
12+
13+
The **Crosshair** functionality of **RadHtmlChart** can be used as of Q3 2020.
14+
15+
The **RadHtmlChart** crosshairs are lines, which are perpendicular to the axes and enable the user to see the exact value at the current cursor position.
16+
17+
You can customize the look of the crosshair through the chosen axis `CrosshairAppearance` tag, and style its tooltips through its nested `TooltipsAppearance`.
18+
19+
>note The crosshair is displayed when the XAxis/YAxis `CrosshairAppearance.Visible` is set to true.
20+
21+
>caption Example 1: Shows the markup code used to create Figure 1, which demonstrates configured crosshairs in the chart.
22+
23+
![htmlchart-crosshairs](../images/htmlchart-chrosshairs.gif)
24+
25+
You can create **Figure 1** using the markup in **Example 1**.
26+
27+
>caption Example 1: Shows an implementation of chart with enabled xAxis and yAxis crosshairs.
28+
29+
````ASP.NET
30+
<telerik:RadHtmlChart runat="server" ID="ChartWithColumnsAndLineSeries" Width="500px" Height="400px">
31+
<ChartTitle Text="Chart with Crosshairs">
32+
</ChartTitle>
33+
<PlotArea>
34+
<Series>
35+
<telerik:ColumnSeries>
36+
<SeriesItems>
37+
<telerik:CategorySeriesItem Y="34" />
38+
<telerik:CategorySeriesItem Y="76" />
39+
<telerik:CategorySeriesItem Y="20" />
40+
<telerik:CategorySeriesItem Y="15" />
41+
<telerik:CategorySeriesItem Y="84" />
42+
</SeriesItems>
43+
<TooltipsAppearance Color="White" />
44+
</telerik:ColumnSeries>
45+
<telerik:LineSeries>
46+
<SeriesItems>
47+
<telerik:CategorySeriesItem Y="76" />
48+
<telerik:CategorySeriesItem Y="12" />
49+
<telerik:CategorySeriesItem Y="28" />
50+
<telerik:CategorySeriesItem Y="92" />
51+
<telerik:CategorySeriesItem Y="54" />
52+
</SeriesItems>
53+
<TooltipsAppearance Color="White" />
54+
</telerik:LineSeries>
55+
</Series>
56+
<XAxis>
57+
<CrosshairAppearance Color="#0000ff" DashType="Solid" Opacity="0.5" Visible="true" Width="2">
58+
<TooltipsAppearance BackgroundColor="#0066ff" Color="#ffffff" Visible="true" DataFormatString="XAxis value is {0}">
59+
<BorderAppearance Width="1" Color="#0000ff" />
60+
</TooltipsAppearance>
61+
</CrosshairAppearance>
62+
<Items>
63+
<telerik:AxisItem LabelText="2016" />
64+
<telerik:AxisItem LabelText="2017" />
65+
<telerik:AxisItem LabelText="2018" />
66+
<telerik:AxisItem LabelText="2019" />
67+
<telerik:AxisItem LabelText="2020" />
68+
</Items>
69+
</XAxis>
70+
<YAxis>
71+
<CrosshairAppearance Color="Red" DashType="Dot" Opacity="1" Visible="true" Width="3">
72+
<TooltipsAppearance BackgroundColor="#ff6666" Color="#ffffff" Visible="true" DataFormatString="YAxis value is {0}">
73+
<BorderAppearance Width="1" Color="#ff0000" />
74+
</TooltipsAppearance>
75+
</CrosshairAppearance>
76+
</YAxis>
77+
</PlotArea>
78+
<Legend>
79+
<Appearance Visible="false" />
80+
</Legend>
81+
</telerik:RadHtmlChart>
82+
````
83+
84+
85+
## See Also
86+
87+
* [Crosshairs demo](https://demos.telerik.com/aspnet-ajax/HtmlChart/Examples/Functionality/CrossHair/DefaultCS.aspx)
88+

‎controls/htmlchart/images/htmlchart-chrosshairs.gif‎

166 KB
Loading

0 commit comments

Comments
 (0)