Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
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 property.

@(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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class GaugesController : Controller { public ActionResult ScaleLabelFormatting() { return View(); } } }
#gauge { height: 440px; width: 100%; }