Your search did not match any results.

Charts - Error Bars

DevExtreme Chart supports value error bars. Implement these bars to indicate data measurement tolerances and confidence intervals. Configure error bar settings and appearance in the series.valueErrorBar object.

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 enable error bars, specify one of the following pairs of valueErrorBar properties:

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