Charts - Multiple Point Selection

This demo illustrates the use of multi-point selection within the Chart component.

www.wikipedia.org

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .Rotated(true) .PointSelectionMode(ChartElementSelectionMode.Multiple) .CommonSeriesSettings(s => s .ArgumentField("Country") .Type(SeriesType.StackedBar) .SelectionStyle(st => st.Hatching(h => h.Direction(HatchingDirection.Left))) ) .Series(s => { s.Add().ValueField("Gold").Name("Gold Medals").Color("#ffd700"); s.Add().ValueField("Silver").Name("Silver Medals").Color("#c0c0c0"); s.Add().ValueField("Bronze").Name("Bronze Medals").Color("#cd7f32"); }) .Title(t => t.Text("Olympic Medals in 2024")) .Export(e => e.Enabled(true)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .OnPointClick(@<text> function(e) { var point = e.target; if(point.isSelected()) { point.clearSelection(); } else { point.select(); } } </text>) .DataSource(new[] { new { Country = "USA", Gold = 40, Silver = 44, Bronze = 42 }, new { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }, new { Country = "Australia", Gold = 18, Silver = 19, Bronze = 16 }, new { Country = "France", Gold = 16, Silver = 26, Bronze = 22 }, new { Country = "Great Britain", Gold = 14, Silver = 22, Bronze = 29 }, new { Country = "Italy", Gold = 12, Silver = 13, Bronze = 15 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult MultiplePointSelection() { return View(); } } }

#chart { height: 440px; }