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.
You can specify hoverMode for the following Chart elements:
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.
@(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;
}