Charts - Auto-Calculated Bar Width

This demo illustrates a common issue in multi-series charts. Individual series can skip values for certain arguments or include zero values. In such cases, arguments can display a different number of bars and cause uneven gaps between data.

The ignoreEmptyPoints property allows you to change this behavior. If you set it to true, bars increase their width to fill the gaps. In this demo, you can see how the property affects the following arguments: Iran, Canada, Saudi Arabia, and Mexico.

www.wikipedia.org

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

@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.Soft) .CommonSeriesSettings(s => s .ArgumentField("State") .Type(SeriesType.Bar) .IgnoreEmptyPoints(true) ) .Series(s => { s.Add().ValueField("Oil").Name("Oil Production"); s.Add().ValueField("Gas").Name("Gas Production"); s.Add().ValueField("Coal").Name("Coal Production"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .Export(e => e.Enabled(true)) .Title("Percent of Total Energy Production") .DataSource(new object[] { new { State = "China", Oil = 4.95, Gas = 2.85, Coal = 45.56 }, new { State = "Russia", Oil = 12.94, Gas = 17.66, Coal = 4.13 }, new { State = "USA", Oil = 8.51, Gas = 19.87, Coal = 15.84 }, new { State = "Iran", Oil = 5.3, Gas = 4.39 }, new { State = "Canada", Oil = 4.08, Gas = 5.4 }, new { State = "Saudi Arabia", Oil = 12.03 }, new { State = "Mexico", Oil = 3.86 } }) )

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 AutoCalculatedBarWidth() { return View(); } } }

#chart { height: 440px; }