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.
@(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%;
}