Gauges - Title and Center Label Customization

This demo shows how to specify a CircularGauge title and display custom labels in the component's center.

A CircularGauge title usually informs users about the nature of gauge data. To customize it, use the properties of the title configuration object:

Location
Use the horizontalAlignment and verticalAlignment properties to place a title on any side of your gauge.
Font Settings
Use the font configuration object.

You can display a custom label in the center of a CircularGauge. Use the centerTemplate property. Render template content as an SVG element.

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(10) .TickInterval(1) .MinorTick(t => t.Visible(true)) ) .Export(e => e.Enabled(true)) .RangeContainer(r => r.BackgroundColor("#03a9f4")) .ValueIndicator(v => v.Color("#03a9f4")) .Value(7.78) .Title(t => t .Text("Gold Production (in Kilograms)") .VerticalAlignment(VerticalEdge.Bottom) .Font(f => f .Size(25) ) .Margin(m => m .Top(25) ) ) .CenterTemplate(@<text> <svg> <rect y="0" x="0" width="200" height="200" fill="transparent"></rect> <g transform="translate(50 0)"> <rect x="0" y="0" width="100" height="70" rx="8" fill="#f2f2f2"></rect> <text text-anchor="middle" y="27" x="50" fill="#000" font-size="20"> <tspan x="50"><%- value() %></tspan> <tspan x="50" dy="30">kg</tspan> </text> </g> <g transform="translate(43 140)"> <rect class="description" x="0" y="0" width="114" height="56" rx="8" fill="#fff"></rect> <text text-anchor="start" y="23" x="15" fill="#000" font-size="12"> <tspan x="15">Capacity: 10 kg</tspan> <tspan x="15" dy="20">Graduation: 10 g</tspan> </text> </g> </svg> </text>) )

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

#gauge { height: 440px; width: 100%; } .description { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); }