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("Year2024").Name("2024");
s.Add().ValueField("Year2020").Name("2020");
s.Add().ValueField("Year2016").Name("2016");
})
.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", Year2016 = 791, Year2020 = 874, Year2024 = 1130 },
new { State = "Indiana", Year2016 = 317, Year2020 = 352, Year2024 = 480 },
new { State = "Michigan", Year2016 = 469, Year2020 = 516, Year2024 = 705 },
new { State = "Ohio", Year2016 = 626, Year2020 = 698, Year2024 = 930 },
new { State = "Wisconsin", Year2016 = 296, Year2020 = 324, Year2024 = 430 }
})
)
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;
}