|
| 1 | +--- |
| 2 | +title: Crosshairs |
| 3 | +page_title: Crosshairs |
| 4 | +description: "Learn how to configure the crosshairs in the Telerik UI Chart component for {{ site.framework }}." |
| 5 | +slug: htmlhelpers_charts_crosshairs_aspnetcore |
| 6 | +--- |
| 7 | + |
| 8 | +# Crosshairs |
| 9 | + |
| 10 | +Crosshairs are lines, which are perpendicular to the axes of the Chart and enable the user to see the exact value at the current cursor position. |
| 11 | + |
| 12 | +## Getting Started |
| 13 | + |
| 14 | +By default, the crosshairs of the Telerik UI for {{ site.framework }} Chart are not visible. To enables them, set the `visible` property to `true`. |
| 15 | + |
| 16 | +```HtmlHelper |
| 17 | + @(Html.Kendo().Chart() |
| 18 | + .Name("chart") |
| 19 | + .AxisDefaults(defaults => { |
| 20 | + defaults.Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true))); |
| 21 | + }) |
| 22 | + .ChartArea(chartArea => chartArea |
| 23 | + .Background("transparent") |
| 24 | + ) |
| 25 | + .Series(series => |
| 26 | + { |
| 27 | + series.Column(new double[] { 1, 2, 3 }); |
| 28 | + }) |
| 29 | + .CategoryAxis(axis => axis |
| 30 | + .Name("label-axis") |
| 31 | + .Categories("A", "B", "C") |
| 32 | + ) |
| 33 | + .ValueAxis(axis => axis |
| 34 | + .Numeric() |
| 35 | + .AxisCrossingValue(0, int.MinValue) |
| 36 | + ) |
| 37 | + ) |
| 38 | +``` |
| 39 | +{% if site.core %} |
| 40 | +```TagHelper |
| 41 | + <kendo-chart name="chart" > |
| 42 | + <axis-defaults> |
| 43 | + <crosshair visible="true"> |
| 44 | + <chart-axis-defaults-crosshair-tooltip visible="true"></chart-axis-defaults-crosshair-tooltip> |
| 45 | + </crosshair> |
| 46 | + </axis-defaults> |
| 47 | + <chart-area background="transparent"> |
| 48 | + </chart-area> |
| 49 | + <series> |
| 50 | + <series-item type="ChartSeriesType.Column" data="new double[] { 1, 2, 3 }"> |
| 51 | + </series-item> |
| 52 | + </series> |
| 53 | + <category-axis> |
| 54 | + <category-axis-item name="label-axis" categories='new string[] {"A", "B", "C"}'></category-axis-item> |
| 55 | + </category-axis> |
| 56 | + <value-axis> |
| 57 | + <value-axis-item type="numeric" axis-crossing-value="new object[] { 0, int.MinValue}"></value-axis-item> |
| 58 | + </value-axis> |
| 59 | + </kendo-chart> |
| 60 | +``` |
| 61 | +{% endif %} |
| 62 | + |
| 63 | +## Customizing the Appearance |
| 64 | + |
| 65 | +The Telerik UI for {{ site.framework }} Chart supports the following properties which enable you to customize the appearance of its crosshairs: |
| 66 | + |
| 67 | +* `Color()`—Sets the color of the crosshair. |
| 68 | +* `DashType()`—Sets the dash type of the crosshair. |
| 69 | + |
| 70 | + The available dash-type options are: |
| 71 | + |
| 72 | + * `Dash`—A line consisting of dashes. |
| 73 | + * `DashDot`—A line consisting of a repeated dash-dot pattern. |
| 74 | + * `Dot`—A line consisting of dots. |
| 75 | + * `LongDash`—A line consisting of a repeated long-dash pattern. |
| 76 | + * `LongDashDot`—A line consisting of a repeated long-dash-dot pattern. |
| 77 | + * `LongDashDotDot`—A line consisting of a repeated long-dash-dot-dot pattern. |
| 78 | + * `Solid`—A solid line. |
| 79 | + |
| 80 | +* `Width()`—Configures the width of the crosshair in pixels. |
| 81 | +* `Opacity()`—Specifies the opacity of the crosshair. |
| 82 | + |
| 83 | +```HtmlHelper |
| 84 | + @(Html.Kendo().Chart() |
| 85 | + .Name("chart") |
| 86 | + .Series(series => { |
| 87 | + series.Line(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India"); |
| 88 | + }) |
| 89 | + .CategoryAxis(axis => axis |
| 90 | + .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011") |
| 91 | + .Crosshair(c => c.Visible(true).Width(5).DashType(ChartDashType.DashDot).Opacity(0.5).Color("green")) |
| 92 | + .MajorGridLines(lines => lines.Visible(false)) |
| 93 | + ) |
| 94 | + .ValueAxis(axis => axis |
| 95 | + .Numeric().Labels(labels => labels.Format("{0}%")) |
| 96 | + .Line(line => line.Visible(false)) |
| 97 | + .Crosshair(c => c.Visible(true).Width(5).DashType(ChartDashType.Dash).Opacity(1).Color("#00FFFF")) |
| 98 | + .AxisCrossingValue(-10) |
| 99 | + ) |
| 100 | + ) |
| 101 | +``` |
| 102 | +{% if site.core %} |
| 103 | +```TagHelper |
| 104 | + <kendo-chart name="chart"> |
| 105 | + <series-defaults type="ChartSeriesType.Line"></series-defaults> |
| 106 | + <series> |
| 107 | + <series> |
| 108 | + <series-item name="India" data="new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }"> |
| 109 | + </series-item> |
| 110 | + </series> |
| 111 | + <category-axis> |
| 112 | + <category-axis-item categories='new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", }'> |
| 113 | + <major-grid-lines visible="false" /> |
| 114 | + <crosshair visible="true" width="5" dash-type="DashType.DashDot" opacity="0.5" color="green"></crosshair> |
| 115 | + </category-axis-item> |
| 116 | + </category-axis> |
| 117 | + <value-axis> |
| 118 | + <value-axis-item type="numeric" axis-crossing-value="new object[] { -10 }"> |
| 119 | + <labels format="{0}%"></labels> |
| 120 | + <crosshair visible="true" width="5" dash-type="DashType.Dash" opacity="1" color="#00FFFF"></crosshair> |
| 121 | + <line visible="false" /> |
| 122 | + </value-axis-item> |
| 123 | + </value-axis> |
| 124 | + </kendo-chart> |
| 125 | +``` |
| 126 | +{% endif %} |
| 127 | + |
| 128 | +## Tooltip Integration |
| 129 | + |
| 130 | +To provide better flexibility, the Crosshairs expose the ability to display details about the data point over which the mouse is currently hovering through its integrated Tooltip. |
| 131 | + |
| 132 | +```HtmlHelper |
| 133 | + @(Html.Kendo().Chart() |
| 134 | + .Name("heatmap") |
| 135 | + .Series(s=>s.HeatMap("Value", "Column", "Row").Labels(l=>l.Visible(false))) |
| 136 | + .DataSource(dataSource=> dataSource.Read("RemoteData", "HeatMap")) |
| 137 | + .Legend(legend=>legend.Visible(false)) |
| 138 | + .XAxis(x => |
| 139 | + { |
| 140 | + x.Numeric().Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true).Color("#00FFFF").Template("Value: #= value #"))); |
| 141 | + }) |
| 142 | + .YAxis(y => |
| 143 | + { |
| 144 | + y.Numeric().Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true).Color("green").Template("Value: #= value #"))); |
| 145 | + }) |
| 146 | + ) |
| 147 | +``` |
| 148 | +{% if site.core %} |
| 149 | +```TagHelper |
| 150 | + <kendo-chart name="heatmap"> |
| 151 | + <series> |
| 152 | + <series-item type="ChartSeriesType.HeatMap" field="Value" name="Value, Column, Row" x-field="Column" y-field="Row"> |
| 153 | + <labels visible="false"> |
| 154 | + </labels> |
| 155 | + </series-item> |
| 156 | + </series> |
| 157 | + <x-axis> |
| 158 | + <x-axis-item type="numeric"> |
| 159 | + <crosshair visible="true"> |
| 160 | + <chart-x-axis-crosshair-tooltip visible="true" color="#00FFFF" template="Value: #= value #"> |
| 161 | + </chart-x-axis-crosshair-tooltip> |
| 162 | + </crosshair> |
| 163 | + </x-axis-item> |
| 164 | + </x-axis> |
| 165 | + <y-axis> |
| 166 | + <y-axis-item name="" type="numeric"> |
| 167 | + <crosshair visible="true"> |
| 168 | + <chart-y-axis-crosshair-tooltip visible="true" color="green" template="Value: #= value #"> |
| 169 | + </chart-y-axis-crosshair-tooltip> |
| 170 | + </crosshair> |
| 171 | + </y-axis-item> |
| 172 | + </y-axis> |
| 173 | + <datasource> |
| 174 | + <transport> |
| 175 | + <read url="@Url.Action("RemoteData","HeatMap")" cache="true" /> |
| 176 | + </transport> |
| 177 | + </datasource> |
| 178 | + <chart-legend visible="false"> |
| 179 | + </chart-legend> |
| 180 | + </kendo-chart> |
| 181 | +``` |
| 182 | +{% endif %} |
| 183 | + |
| 184 | +## See Also |
| 185 | + |
| 186 | +* [Using the API of the Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chart-api/index) |
| 187 | +* [Basic Usage of the Chart HtmlHelper for {{ site.framework }} (Demos)](https://demos.telerik.com/{{ site.platform }}/charts) |
| 188 | +* [Server-Side API of the Chart for {{ site.framework }}](/api/chart) |
0 commit comments