Your search did not match any results.

Charts - Error Bars

DevExtreme Chart supports value error bars. These bars indicate data measurement tolerances and confidence intervals. Use the series.valueErrorBar object to configure error bar settings and appearance.

www.wikipedia.org
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.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 ErrorBars() { return View(); } } }
#chart { height: 440px; }

To display error bars, specify one of the following pairs of valueErrorBar properties:

This demo implements predefined error bars specified in the Chart data source.