Data Visualization ▸ Multiple Series Selection

@(Html.DevExtreme().Chart()
    .ID("chart")
    .SeriesSelectionMode(ChartElementSelectionMode.Multiple)
    .CommonSeriesSettings(s => s
        .ArgumentField("Year")
        .Type(SeriesType.StackedArea)
    )
    .CommonAxisSettings(s => s.ValueMarginsEnabled(false))
    .ArgumentAxis(a => a.Type(AxisScaleType.Discrete))
    .ValueAxis(a => a.Add().Label(l => l.Format(f => f.Type(Format.Percent))))
    .Series(s => {
        s.Add().ValueField("IE7").Name("Internet Explorer 7");
        s.Add().ValueField("IE8").Name("Internet Explorer 8");
        s.Add().ValueField("IE9").Name("Internet Explorer 9");
        s.Add().ValueField("IE10").Name("Internet Explorer 10");
    })
    .Title(t => t.Text("Internet Explorer Statistics"))
    .Export(e => e.Enabled(true))
    .Legend(l => l
        .VerticalAlignment(VerticalEdge.Bottom)
        .HorizontalAlignment(HorizontalAlignment.Center)
    )
    .OnSeriesClick(@<text>
        function(e) {
            var series = e.target;
            if(series.isSelected()) {
                series.clearSelection();
            } else {
                series.select();
            }
        }
    </text>)
    .DataSource(new object[] {
        new { Year = 2006, IE7 = 0.011 },
        new { Year = 2007, IE7 = 0.192 },
        new { Year = 2008, IE7 = 0.265 },
        new { Year = 2009, IE7 = 0.213, IE8 = 0.052 },
        new { Year = 2010, IE7 = 0.091, IE8 = 0.160 },
        new { Year = 2011, IE7 = 0.053, IE8 = 0.141, IE9 = 0.031 },
        new { Year = 2012, IE7 = 0.021, IE8 = 0.088, IE9 = 0.065, IE10 = 0.001 },
        new { Year = 2013, IE7 = 0.008, IE8 = 0.052, IE9 = 0.039, IE10 = 0.026 }
    })
)

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

    }
}

#chart {
    height: 440px;
}