Crosshairs
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.
Getting Started
By default, the crosshairs of the Telerik UI for ASP.NET MVC Chart are not visible. To enables them, set the visible property to true.
@(Html.Kendo().Chart()
.Name("chart")
.AxisDefaults(defaults => {
defaults.Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true)));
})
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Column(new double[] { 1, 2, 3 });
})
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories("A", "B", "C")
)
.ValueAxis(axis => axis
.Numeric()
.AxisCrossingValue(0, int.MinValue)
)
)
Customizing the Appearance
The Telerik UI for ASP.NET MVC Chart supports the following properties which enable you to customize the appearance of its crosshairs:
-
Color()—Sets the color of the crosshair. -
DashType()—Sets the dash type of the crosshair.The available dash-type options are:
-
Dash—A line consisting of dashes. -
DashDot—A line consisting of a repeated dash-dot pattern. -
Dot—A line consisting of dots. -
LongDash—A line consisting of a repeated long-dash pattern. -
LongDashDot—A line consisting of a repeated long-dash-dot pattern. -
LongDashDotDot—A line consisting of a repeated long-dash-dot-dot pattern. -
Solid—A solid line.
-
Width()—Configures the width of the crosshair in pixels.-
Opacity()—Specifies the opacity of the crosshair.
@(Html.Kendo().Chart()
.Name("chart")
.Series(series => {
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");
})
.CategoryAxis(axis => axis
.Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
.Crosshair(c => c.Visible(true).Width(5).DashType(ChartDashType.DashDot).Opacity(0.5).Color("green"))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0}%"))
.Line(line => line.Visible(false))
.Crosshair(c => c.Visible(true).Width(5).DashType(ChartDashType.Dash).Opacity(1).Color("#00FFFF"))
.AxisCrossingValue(-10)
)
)
Tooltip Integration
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.
@(Html.Kendo().Chart()
.Name("heatmap")
.Series(s=>s.HeatMap("Value", "Column", "Row").Labels(l=>l.Visible(false)))
.DataSource(dataSource=> dataSource.Read("RemoteData", "HeatMap"))
.Legend(legend=>legend.Visible(false))
.XAxis(x =>
{
x.Numeric().Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true).Color("#00FFFF").Template("Value: #= value #")));
})
.YAxis(y =>
{
y.Numeric().Crosshair(c => c.Visible(true).Tooltip(t => t.Visible(true).Color("green").Template("Value: #= value #")));
})
)