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