Documentation
Area series can be used to clearly emphasize change in values. In this example, you can switch between the area, stacked area and full-stacked area series types. Stacked area series help visualize multiple series and compare the manner in which each series contributes to the total aggregate value for specific arguments. Full-stacked area series help compare the percentage value of multiple area series for each argument.
www.geohive.com
<div id="chart-demo">
@(Html.DevExtreme().Chart()
.ID("area-chart")
.Palette(VizPalette.HarmonyLight)
.CommonSeriesSettings(s => s
.ArgumentField("Country")
.Type(SeriesType.Area)
)
.Series(s => {
s.Add().ValueField("Y1564").Name("15-64 years");
s.Add().ValueField("Y014").Name("0-14 years");
s.Add().ValueField("Y65").Name("65 years and older");
})
.Margin(m => m.Bottom(20))
.Title("Population: Age Structure (2000)")
.ArgumentAxis(a => a.ValueMarginsEnabled(false))
.ValueAxis(a => a
.Add()
.Label(l => l.Format(Format.Millions))
)
.Export(e => e.Enabled(true))
.Legend(l => l
.VerticalAlignment(VerticalEdge.Bottom)
.HorizontalAlignment(HorizontalAlignment.Center)
)
.DataSource(new List<object> {
new { Country = "China", Y014 = 320866959, Y1564 = 853191410, Y65 = 87774113 },
new { Country = "India", Y014 = 340419115, Y1564 = 626520945, Y65 = 47063757 },
new { Country = "United States", Y014 = 58554755, Y1564 = 182172625, Y65 = 34835293 },
new { Country = "Indonesia", Y014 = 68715705, Y1564 = 146014815, Y65 = 10053690 },
new { Country = "Brazil", Y014 = 50278034, Y1564 = 113391494, Y65 = 9190842 },
new { Country = "Russia", Y014 = 26465156, Y1564 = 101123777, Y65 = 18412243 }
})
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
SeriesType.Area,
SeriesType.StackedArea,
SeriesType.FullStackedArea
})
.Value(SeriesType.Area)
.OnValueChanged(@<text>
function(e) {
var chart = $("#area-chart").dxChart("instance");
chart.option("commonSeriesSettings.type", e.value);
chart.option("valueAxis[0].label.format", e.value === "@SeriesType.FullStackedArea" ? "percent" : "millions");
}
</text>)
)
</div>
</div>
</div>
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;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult Area() {
return View();
}
}
}
.options {
padding: 20px;
background-color: #f5f5f5;
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}