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

​x
 
@(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>))​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class GaugesController : Controller {        public ActionResult GaugeTitleCustomized() {            return View();        }    }}

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