Area

Light

Light Dark Contrast

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.

Prev Demo Next Demo

jQuery

Knockout

AngularJS

Angular

ASP.NET MVC

ASP.NET Core

<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.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; }