Gauges - Custom Layout

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

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().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.MVC.Demos.Models.SampleData; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class GaugesController : Controller { public ActionResult CustomLayoutLinearGauge() { return View(); } } }

#gauge { height: 440px; width: 100%; }