Your search did not match any results.
Circular Gauge

Scale Label Formatting

Documentation

This demo shows how to format the text of the scale labels using the customizeText option.

@(Html.DevExtreme().CircularGauge() .ID("gauge") .Scale(s => s .StartValue(0) .EndValue(100) .TickInterval(10) .Label(l => l.CustomizeText(@<text> function (arg) { return arg.valueText + " %"; } </text>)) ) .RangeContainer(c => c.Ranges(r => { r.Add().StartValue(0).EndValue(20).Color("#CE2029"); r.Add().StartValue(20).EndValue(50).Color("#FFD700"); r.Add().StartValue(50).EndValue(100).Color("#228B22"); })) .Export(e => e.Enabled(true)) .Title(t => t .Text("Battery Charge") .Font(f => f.Size(28)) ) .Value(45) )
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 ScaleLabelFormatting() { return View(); } } }
#gauge { height: 440px; width: 100%; }