Charts - Range Area

Range area series can be used to display value ranges corresponding to specified arguments. Data is displayed as a color filled space between the line that joins the beginning and the line that joins the end series points.

www.kaggle.com

Backend API

@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.Violet) .CommonSeriesSettings(s => s .Type(SeriesType.RangeArea) .ArgumentField("Date") ) .Series(s => s .Add() .RangeValue1Field("Val2010") .RangeValue2Field("Val2011") .Name("2010 - 2011") ) .Title("Annual Inflation Rate in 2010 and 2011") .ArgumentAxis(a => a .ValueMarginsEnabled(false) .Label(l => l.Format(Format.Month)) ) .ValueAxis(a => a .Add() .VisualRange(range => range.StartValue(0.5).EndValue(4)) .TickInterval(0.5) .ValueMarginsEnabled(false) .Label(l => l .Format(f => f .Type(Format.FixedPoint) .Precision(2) ) .CustomizeText(@<text> function() { return this.valueText + " %"; } </text>) ) ) .Export(e => e.Enabled(true)) .Legend(l => l.Visible(false)) .DataSource(new[] { new { Date = new DateTime(2010, 1, 1), Val2010 = 1.63, Val2011 = 2.63 }, new { Date = new DateTime(2010, 2, 1), Val2010 = 2.11, Val2011 = 2.14 }, new { Date = new DateTime(2010, 3, 1), Val2010 = 2.68, Val2011 = 2.31 }, new { Date = new DateTime(2010, 4, 1), Val2010 = 3.16, Val2011 = 2.24 }, new { Date = new DateTime(2010, 5, 1), Val2010 = 3.57, Val2011 = 2.02 }, new { Date = new DateTime(2010, 6, 1), Val2010 = 3.56, Val2011 = 1.05 }, new { Date = new DateTime(2010, 7, 1), Val2010 = 3.63, Val2011 = 1.24 }, new { Date = new DateTime(2010, 8, 1), Val2010 = 3.77, Val2011 = 1.15 }, new { Date = new DateTime(2010, 9, 1), Val2010 = 3.87, Val2011 = 1.14 }, new { Date = new DateTime(2010, 10, 1), Val2010 = 3.53, Val2011 = 1.17 }, new { Date = new DateTime(2010, 11, 1), Val2010 = 3.39, Val2011 = 1.14 }, new { Date = new DateTime(2010, 12, 1), Val2010 = 2.96, Val2011 = 1.50 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult RangeArea() { return View(); } } }

#chart { height: 440px; }