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.
@(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.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 RangeArea() {
return View();
}
}
}#chart {
height: 440px;
}