Charts - Error Bars

If your data contains an error or measurement uncertainty, you can indicate a confidential interval on the Chart using error bars. To configure them, use the fields of the series’ valueErrorBar object. In this example, error bars indicate a range of average temperatures (on the upper pane) and humidity (on the lower pane) for a specific month.

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") .DataSource(new[] { new { month = "January", avgT = 14.1, avgLowT = 9.1, avgHighT = 19.1, avgH = 70 }, new { month = "February", avgT = 14.7, avgLowT = 9.8, avgHighT = 19.6, avgH = 74 }, new { month = "March", avgT = 15.6, avgLowT = 10.6, avgHighT = 20.4, avgH = 79 }, new { month = "April", avgT = 16.8, avgLowT = 11.9, avgHighT = 21.7, avgH = 80 }, new { month = "May", avgT = 18.2, avgLowT = 13.6, avgHighT = 22.7, avgH = 83 }, new { month = "June", avgT = 20.2, avgLowT = 15.4, avgHighT = 25.0, avgH = 85 }, new { month = "July", avgT = 22.6, avgLowT = 17.3, avgHighT = 27.9, avgH = 86 }, new { month = "August", avgT = 23.0, avgLowT = 17.7, avgHighT = 28.4, avgH = 86 }, new { month = "September", avgT = 22.3, avgLowT = 17.0, avgHighT = 27.7, avgH = 83 }, new { month = "October", avgT = 20.1, avgLowT = 14.8, avgHighT = 25.3, avgH = 79 }, new { month = "November", avgT = 17.2, avgLowT = 11.8, avgHighT = 22.7, avgH = 72 }, new { month = "December", avgT = 14.6, avgLowT = 9.5, avgHighT = 19.7, avgH = 68 } }) .CommonSeriesSettings(s => s.ArgumentField("month")) .Panes(p => { p.Add().Name("top"); p.Add().Name("bottom"); }) .DefaultPane("bottom") .Series(s => { s.Add() .Pane("top") .ValueField("avgT") .Name("Average Temperature, °C") .ValueErrorBar(b => b .LowValueField("avgLowT") .HighValueField("avgHighT") .LineWidth(1) .Opacity(0.8)); s.Add() .Pane("bottom") .ValueField("avgH") .Type(SeriesType.Bar) .Name("Average Humidity, %") .ValueErrorBar(b => b .Type(ValueErrorBarType.Fixed) .Value(3) .LineWidth(1)); }) .ArgumentAxis(a => a .Label(l => l .DisplayMode(ChartLabelDisplayMode.Stagger))) .Export(e => e.Enabled(true)) .ValueAxis(a => { a.Add() .Pane("top") .Grid(g => g.Visible(true)) .Title(t => t.Text("Temperature, °C")); a.Add() .TickInterval(50) .Pane("bottom") .Grid(g => g.Visible(true)) .Title(t => t.Text("Humidity, %")); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip(@<text> function (arg) { return { text: arg.seriesName + ": " + arg.value + " ( range: " + arg.lowErrorValue + " - " + arg.highErrorValue + ")" }; } </text>)) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center)) .Title(t => t.Text("Weather in Los Angeles, California")) )

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

#chart { height: 440px; }