Data Visualization ▸ Gauge Tooltip

This demo shows how to enable and customize the tooltip of the CircularGauge. Hover over the value indicator or any of the subvalue indicators to show its tooltip.

@(Html.DevExtreme().CircularGauge()
    .ID("gauge")
    .Scale(s => s
        .StartValue(0)
        .EndValue(20)
        .TickInterval(5)
    )
    .Value(12)
    .Subvalues(new double[] { 8, 18 })
    .Tooltip(t => t
        .Enabled(true)
        .Font(f => f
            .Color("#DCD0FF")
            .Size(40)
        )
        .CustomizeTooltip(@<text>
            function (arg) {
                return {
                    text: arg.valueText + " ohm"
                };
            }
        </text>)
    )
    .Export(e => e.Enabled(true))
    .Title(t => t
        .Text("Rheostat Resistance")
        .Font(f => f.Size(28))
    )
)
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 GaugeTooltip() {
            return View();
        }

    }
}
#gauge {
    height: 440px;
    width: 100%;
}