Your search did not match any results.
Charts

Full Stacked Bar

Documentation
This demo illustrates the use of the full-stacked bar series and how you can compare the percentage value of multiple bar series for each argument. The height of each bar always equals 100%. The value axis is continuous and displays a range between 0 and 100%. Pause over a bar to see bar tooltips.
@(Html.DevExtreme().Chart() .CommonSeriesSettings(s => s .ArgumentField("Country") .Type(SeriesType.FullStackedBar) ) .Series(s => { s.Add().ValueField("Hydro").Name("Hydro-electric"); s.Add().ValueField("Oil").Name("Oil"); s.Add().ValueField("Gas").Name("Natural gas"); s.Add().ValueField("Coal").Name("Coal"); s.Add().ValueField("Nuclear").Name("Nuclear"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Top) .HorizontalAlignment(HorizontalAlignment.Center) .ItemTextPosition(Position.Right) ) .Title(t => t .Text("Energy Consumption in 2004") .Subtitle(s => s.Text("(Millions of Tons, Oil Equivalent)")) ) .Export(e => e.Enabled(true)) .Tooltip(t => t .Enabled(true) .CustomizeTooltip(@<text> function(arg) { return { text: arg.percentText + " - " + arg.valueText }; } </text>) ) .DataSource(new List<object> { new { Country = "USA", Hydro = 59.8, Oil = 937.6, Gas = 582, Coal = 564.3, Nuclear = 187.9 }, new { Country = "China", Hydro = 74.2, Oil = 308.6, Gas = 35.1, Coal = 956.9, Nuclear = 11.3 }, new { Country = "Russia", Hydro = 40, Oil = 128.5, Gas = 361.8, Coal = 105, Nuclear = 32.4 }, new { Country = "Japan", Hydro = 22.6, Oil = 241.5, Gas = 64.9, Coal = 120.8, Nuclear = 64.8 }, new { Country = "India", Hydro = 19, Oil = 119.3, Gas = 28.9, Coal = 204.8, Nuclear = 3.8 }, new { Country = "Germany", Hydro = 6.1, Oil = 123.6, Gas = 77.3, Coal = 85.7, Nuclear = 37.8 } }) )
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.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult FullStackedBar() { return View(); } } }