Data Visualization ▸ Multiple Point Selection

@(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.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 MultiplePointSelection() {
            return View();
        }

    }
}

#chart {
    height: 440px;
}