Charts - Spline Area

Spline area series display smooth lines that connect data points. This demo shows different spline area series types. Use the drop-down editor below the Chart to select the type.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div id="chart-demo"> @(Html.DevExtreme().Chart() .ID("spline-area-chart") .Palette(VizPalette.HarmonyLight) .Title("Corporations with Highest Market Value") .CommonSeriesSettings(s => s .ArgumentField("Company") .Type(SeriesType.SplineArea) ) .ArgumentAxis(a => a.ValueMarginsEnabled(false)) .Margin(m => m.Bottom(20)) .Series(s => { s.Add().ValueField("Y2005").Name("2005"); s.Add().ValueField("Y2004").Name("2004"); }) .Export(e => e.Enabled(true)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .DataSource(new[] { new { Company = "ExxonMobil", Y2005 = 377.28, Y2004 = 270.25 }, new { Company = "GeneralElectric", Y2005 = 353.49, Y2004 = 311.43 }, new { Company = "Microsoft", Y2005 = 269.86, Y2004 = 273.32 }, new { Company = "Citigroup", Y2005 = 252.95, Y2004 = 280.50 }, new { Company = "Royal Dutch Shell plc", Y2005 = 197.67, Y2004 = 165.89 }, new { Company = "Procted & Gamble", Y2005 = 184.72, Y2004 = 130.52 } }) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> @(Html.DevExtreme().SelectBox() .DataSource(new[] { SeriesType.SplineArea, SeriesType.StackedSplineArea, SeriesType.FullStackedSplineArea }) .Value(SeriesType.SplineArea) .InputAttr("aria-label", "Series Type") .OnValueChanged(@<text> function(e) { $("#spline-area-chart").dxChart("option", "commonSeriesSettings.type", e.value); } </text>) ) </div> </div> </div>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult SplineArea() { return View(); } } }

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); 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; }

splinearea
The spline area series draws a line between neighboring data points and fills the area under the line. If the Chart contains multiple area series, they overlap.
stackedsplinearea
The Chart displays areas stacked on top of each other without overlapping. This type of Chart is useful if you need to compare the contribution of each series to the overall value.
fullstackedsplinearea
The Chart stacks the areas. Values are displayed as percentages of the total for each argument, as opposed to absolute values. The topmost series points are always plotted at 100%, and the graph completely fills the Chart's pane.

To create multiple spline area series, use the series array to declare each series and the commonSeriesSettings object to specify the common series type.