Your search did not match any results.
Linear Gauge

Custom Layout

Documentation

This demo shows how to adjust a relative position of the LinerGauge elements. The range container, value and subvalue indicators have the offset option that specifies a shift from the scale for this element. When this option is assigned to a positive value, the corresponding element moves down from its initial position. Otherwise, it moves up.

@(Html.DevExtreme().LinearGauge() .ID("gauge") .Scale(s => s .StartValue(0) .EndValue(30) .TickInterval(5) .Tick(t => t.Color("#536878")) .Label(l => l.IndentFromTick(-3)) ) .RangeContainer(r => r .Offset(10) .Ranges(c => { c.Add().StartValue(0).EndValue(5).Color("#92000A"); c.Add().StartValue(5).EndValue(20).Color("#E6E200"); c.Add().StartValue(20).EndValue(30).Color("#77DD77"); }) ) .ValueIndicator(v => v.Offset(20)) .SubvalueIndicator(s => s.Offset(-15)) .Export(e => e.Enabled(true)) .Title(t => t .Text("Issues Closed (with Min and Max Expected)") .Font(f => f.Size(28)) ) .Value(17) .Subvalues(new double[] { 5, 25 }) )
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class GaugesController : Controller { public ActionResult CustomLayoutLinearGauge() { return View(); } } }
#gauge { height: 440px; width: 100%; }