Charts - Crosshair

The DevExtreme Chart component ships with integrated crosshair support (vertical and horizontal lines centered on a data point). When enabled, the crosshair follows the cursor and snaps to the nearest series point. To configure crosshair settings, specify the crosshair object.

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("Country") .Type(SeriesType.Spline) .Point(p => p.HoverMode(ChartPointInteractionMode.AllArgumentPoints)) ) .ArgumentAxis(a => a .ValueMarginsEnabled(false) .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels) .Grid(g => g.Visible(true)) ) .Crosshair(c => c .Enabled(true) .Color("#949494") .Width(3) .DashStyle(DashStyle.Dot) .Label(l => l .Visible(true) .BackgroundColor("#949494") .Font(f => f.Color("#fff").Size(12)) ) ) .Series(s => { s.Add().ValueField("Hydro").Name("Hydro-electric"); s.Add().ValueField("Oil").Name("Oil"); s.Add().ValueField("Gas").Name("Natural gas"); s.Add().ValueField("Coal").Name("Coal"); s.Add().ValueField("Nuclear").Name("Nuclear"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) .ItemTextPosition(Position.Bottom) ) .Title(t => t .Text("Energy Consumption in 2024") .Subtitle(s => s.Text("(Millions of Tons, Oil Equivalent)")) ) .Export(e => e.Enabled(true)) .Tooltip(t => t.Enabled(true)) .DataSource(new[] { new { Country = "USA", Hydro = 60, Oil = 940, Gas = 910, Coal = 210, Nuclear = 230 }, new { Country = "Japan", Hydro = 20, Oil = 170, Gas = 85, Coal = 120, Nuclear = 35 }, new { Country = "India", Hydro = 40, Oil = 260, Gas = 60, Coal = 620, Nuclear = 10 }, new { Country = "Germany", Hydro = 7, Oil = 110, Gas = 85, Coal = 35, Nuclear = 5 }, new { Country = "Canada", Hydro = 90, Oil = 110, Gas = 120, Coal = 5, Nuclear = 20 }, new { Country = "Brazil", Hydro = 110, Oil = 150, Gas = 50, Coal = 15, Nuclear = 5 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult Crosshair() { return View(); } } }

#chart { height: 440px; }

This demo configures the following crosshair properties:

color
Specifies line color.
width
Configures line width.
dashStyle
Specifies line style.
label
Configures labels (text and appearance).

To override settings for each line individually, configure crosshair.horizontalLine and crosshair.verticalLine objects.