Gauges - Scale Label Formatting

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

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