@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s
.ArgumentField("State")
.Type(SeriesType.StackedBar)
)
.Series(s => {
s.Add().ValueField("Maleyoung").Name("Male: 0-14").Stack("Male");
s.Add().ValueField("Malemiddle").Name("Male: 15-64").Stack("Male");
s.Add().ValueField("Maleolder").Name("Male: 65 and older").Stack("Male");
s.Add().ValueField("Femaleyoung").Name("Female: 0-14").Stack("Female");
s.Add().ValueField("Femalemiddle").Name("Female: 15-64").Stack("Female");
s.Add().ValueField("Femaleolder").Name("Female: 65 and older").Stack("Female");
})
.Legend(l => l
.HorizontalAlignment(HorizontalAlignment.Right)
.Position(RelativePosition.Inside)
.Border(b => b.Visible(true))
.ColumnCount(2)
.CustomizeItems("customizeLegendItems")
)
.ValueAxis(a => a
.Add().Title(t => t.Text("Populations, millions"))
)
.Title("Population: Age Structure")
.Export(e => e.Enabled(true))
.Tooltip(t => t.Enabled(true))
.DataSource(new[] {
new { State = "USA", Maleyoung = 29.956, Malemiddle = 90.354, Maleolder = 14.472, Femaleyoung = 28.597, Femalemiddle = 91.827, Femaleolder = 20.362 },
new { State = "Brazil", Maleyoung = 25.607, Malemiddle = 55.793, Maleolder = 3.727, Femaleyoung = 24.67, Femalemiddle = 57.598, Femaleolder = 5.462 },
new { State = "Russia", Maleyoung = 13.493, Malemiddle = 48.983, Maleolder = 5.802, Femaleyoung = 12.971, Femalemiddle = 52.14, Femaleolder = 12.61 },
new { State = "Japan", Maleyoung = 9.575, Malemiddle = 43.363, Maleolder = 9.024, Femaleyoung = 9.105, Femalemiddle = 42.98, Femaleolder = 12.501 },
new { State = "Mexico", Maleyoung = 17.306, Malemiddle = 30.223, Maleolder = 1.927, Femaleyoung = 16.632, Femalemiddle = 31.868, Femaleolder = 2.391 },
new { State = "Germany", Maleyoung = 6.679, Malemiddle = 28.638, Maleolder = 5.133, Femaleyoung = 6.333, Femalemiddle = 27.693, Femaleolder = 8.318 },
new { State = "United Kindom", Maleyoung = 5.816, Malemiddle = 19.622, Maleolder = 3.864, Femaleyoung = 5.519, Femalemiddle = 19.228, Femaleolder = 5.459 }
})
)
<script>
function customizeLegendItems(items) {
var sortedItems = [];
items.forEach(function (item) {
var startIndex = item.series.stack === "Male" ? 0 : 3;
sortedItems.splice(startIndex, 0, item);
});
return sortedItems;
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult SideBySideStackedBar() {
return View();
}
}
}
#chart {
height: 440px;
}