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.
To display error bars, specify one of the following pairs of valueErrorBar properties:
lowValueField and highValueField
Bind fields that contain error values for each series point.
value and type
Calculate error bar values based on series data points.
This demo implements predefined error bars specified in the Chart data source.
@(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;
}