Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Area Charts

Step Area with Gaps

Documentation

This demo illustrates how the Chart UI component treats points with null value.

www.nytimes.com
@(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("Year") .Type(SeriesType.StepArea) .Steparea(a => a.Point(p => p.Visible(true))) ) .Series(s => { s.Add().ValueField("Gold").Name("Gold Medals").Color("#ffd700"); s.Add().ValueField("Silver").Name("Silver Medals").Color("#c0c0c0"); }) .Title(t => t.Text("France Olympic Medals")) .Export(e => e.Enabled(true)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .ArgumentAxis(a => a .Label(l => l .Format(f => f .Type(Format.Decimal) ) ) ) .DataSource(new object[] { new { Year = 1904, Gold = (int?)null, Silver = (int?)null }, new { Year = 1908, Gold = 5, Silver = 5 }, new { Year = 1912, Gold = 7, Silver = 4 }, new { Year = 1916, Gold = (int?)null, Silver = (int?)null }, new { Year = 1920, Gold = 9, Silver = 19 }, new { Year = 1924, Gold = 13, Silver = 15 }, new { Year = 1928, Gold = 6, Silver = 10 }, new { Year = 1932, Gold = 10, Silver = 5 }, new { Year = 1936, Gold = 7, Silver = 6 }, new { Year = 1940, Gold = (int?)null, Silver = (int?)null }, new { Year = 1944, Gold = (int?)null, Silver = (int?)null }, new { Year = 1948, Gold = 10, Silver = 6 }, new { Year = 1952, Gold = 6, Silver = 6 }, new { Year = 1956, Gold = 4, Silver = 4 }, new { Year = 1960, Gold = (int?)null, Silver = 2 }, new { Year = 1964, Gold = 1, Silver = 8 }, new { Year = 1968, Gold = 7, Silver = 3 }, new { Year = 1972, Gold = 2, Silver = 4 }, new { Year = 1976, Gold = 2, Silver = 3 }, new { Year = 1980, Gold = 6, Silver = 5 }, new { Year = 1984, Gold = 5, Silver = 7 }, new { Year = 1988, Gold = 6, Silver = 4 }, new { Year = 1992, Gold = 8, Silver = 5 }, new { Year = 1996, Gold = 15, Silver = 7 }, new { Year = 2000, Gold = 13, Silver = 14 }, new { Year = 2004, Gold = 11, Silver = 9 }, new { Year = 2008, Gold = 7, Silver = 16 } }) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult NullPointSupport() { return View(); } } }
#chart { height: 440px; width: 100%; }