Charts - Hover Mode

DevExtreme Chart supports configurable hover modes for both series and points. This demo applies a common hoverMode for all series/points and a custom mode for the component legend.

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("State") .Type(SeriesType.Spline) .HoverMode(ChartSeriesHoverMode.IncludePoints) .Point(p => p.HoverMode(ChartPointInteractionMode.AllArgumentPoints)) ) .Series(s => { s.Add().ValueField("Year2004").Name("2004"); s.Add().ValueField("Year2001").Name("2001"); s.Add().ValueField("Year1998").Name("1998"); }) .StickyHovering(false) .Title(t => t.Text("Great Lakes Gross State Product")) .Export(e => e.Enabled(true)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) .HoverMode(ChartLegendHoverMode.ExcludePoints) ) .DataSource(new[] { new { State = "Illinois", Year1998 = 374, Year2001 = 427, Year2004 = 479 }, new { State = "Indiana", Year1998 = 129, Year2001 = 146, Year2004 = 177 }, new { State = "Michigan", Year1998 = 259, Year2001 = 286, Year2004 = 323 }, new { State = "Ohio", Year1998 = 299, Year2001 = 325, Year2004 = 368 }, new { State = "Wisconsin", Year1998 = 110, Year2001 = 132, Year2004 = 162 } }) )

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 HoverMode() { return View(); } } }

#chart { height: 440px; }

You can specify hoverMode for the following Chart elements:

series
A specific series.
commonSeriesSettings
All series.
commonSeriesSettings.spline (or other Series Type objects)
All series (specific type).
legend
Series hovered in the Chart legend.
series.point
Points in a specific series.
commonSeriesSettings.point (or other Series Type objects)
All points.
commonSeriesSettings.spline.point
All points in series (specific type).
argumentAxis
All points at common argument values.

To further customize Chart behavior, define the stickyHovering property. When enabled (default), points remain in a hovered state until users hover the mouse pointer over other points or move it outside the bounds of the component.