Gauges - Custom Layout

This demo shows how to adjust a relative position of the CircularGauge elements. The range container, value and subvalue indicators have 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 toward the center of the gauge. Otherwise, it moves away.

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().CircularGauge() .ID("gauge") .Scale(s => s .StartValue(0) .EndValue(100) .Tick(t => t.Color("#536878")) .TickInterval(10) .Label(l => l.IndentFromTick(3)) ) .RangeContainer(c => c .Offset(10) .Ranges(r => { r.Add().StartValue(0).EndValue(30).Color("#92000A"); r.Add().StartValue(30).EndValue(70).Color("#E6E200"); r.Add().StartValue(70).EndValue(100).Color("#77DD77"); }) ) .ValueIndicator(i => i.Offset(50)) .SubvalueIndicator(i => i.Offset(-25)) .Title(t => t .Text("Amount of Tickets Sold (with Min and Max Expected)") .Font(f => f.Size(28)) ) .Export(e => e.Enabled(true)) .Value(85) .Subvalues(new double[] { 40, 90 }) )

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 CustomLayout() { return View(); } } }

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