Your search did not match any results.

Gauges - Tooltip and Legend

This demo shows how to enable and customize tooltips in the BarGauge component. A tooltip is a small pop-up rectangle that displays the value of the bar that is currently hovered over. To enable the tooltips, set the tooltip.enabled property to true. In this demo, the text displayed by the tooltips is customized.

Backend API
@(Html.DevExtreme().BarGauge() .ID("gauge") .StartValue(0) .EndValue(200) .Values(new[] { 121.4, 135.4, 115.9, 141.1, 127.5 }) .Label(l => l.Visible(false)) .Tooltip(t => t .Enabled(true) .CustomizeTooltip("customizeTooltip") ) .Export(e => e.Enabled(true)) .Title(t => t .Text("Average Speed by Racer") .Font(f => f.Size(28)) ) .Legend(l => l .Visible(true) .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) .CustomizeText("customizeText") ) ) <script> function getText(item, text) { return "Racer " + (item.index + 1) + " - " + text + " km/h"; } function customizeTooltip(arg) { return { text: getText(arg, arg.valueText) }; } function customizeText(arg) { return getText(arg.item, arg.text); } </script>
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 Tooltip() { return View(); } } }
#gauge { height: 440px; width: 100%; }