This demo illustrates the use of the stacked bar series type. Unlike side-by-side bar charts, this series is able to present both the proportion and the total value for each data category using rectangular bars stacked on top of one another.
@(Html.DevExtreme().Chart()
.ID("chart")
.CommonSeriesSettings(s => s
.ArgumentField("State")
.Type(SeriesType.StackedBar)
)
.Series(s => {
s.Add().ValueField("Young").Name("0-14");
s.Add().ValueField("Middle").Name("15-64");
s.Add().ValueField("Older").Name("65 and older");
})
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
.ItemTextPosition(Position.Top)
)
.ValueAxis(a => a
.Add()
.Title(t => t.Text("millions"))
.Position(Position.Right)
)
.Title("Male Age Structure")
.Export(e => e.Enabled(true))
.Tooltip(t => t
.Enabled(true)
.Location(ChartTooltipLocation.Edge)
.CustomizeTooltip(@<text>
function(arg) {
return {
text: arg.seriesName + " years: " + arg.valueText
};
}
</text>)
)
.DataSource(new[] {
new { State = "Germany", Young = 6.7, Middle = 28.6, Older = 5.1 },
new { State = "Japan", Young = 9.6, Middle = 43.4, Older = 9.0 },
new { State = "Russia", Young = 13.5, Middle = 49.0, Older = 5.8 },
new { State = "USA", Young = 30.0, Middle = 90.3, Older = 14.5 }
})
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult StackedBar() {
return View();
}
}
}