Gauges - Different Value Indicator Types

This demo illustrates all the available value indicator types for the LinearGauge.

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

<div class="long-title"><h3>Available Disk Space</h3></div> @using DevExtreme.AspNet.Mvc.Builders; @functions { LinearGaugeBuilder CreateGauge() { return Html.DevExtreme().LinearGauge() .Scale(s => s .StartValue(0) .EndValue(100) .TickInterval(50) .Label(l => l.CustomizeText(@" function (arg) { return arg.valueText + "" %""; } ")) ); } } <div id="gauge-demo"> @(CreateGauge() .ID("c1") .Value(75) .ValueIndicator(i => i .Type(GaugeIndicatorType.Rectangle) .Color("#9B870C") ) ) @(CreateGauge() .ID("c2") .Value(80) .ValueIndicator(i => i .Type(GaugeIndicatorType.Rhombus) .Color("#779ECB") ) ) @(CreateGauge() .ID("c3") .Value(65) .ValueIndicator(i => i .Type(GaugeIndicatorType.Circle) .Color("#8FBC8F") ) ) @(CreateGauge() .ID("c4") .Value(90) .ValueIndicator(i => i .Type(GaugeIndicatorType.RangeBar) .Color("#483D8B") ) ) @(CreateGauge() .ID("c5") .Value(70) .ValueIndicator(i => i .Type(GaugeIndicatorType.TextCloud) .Color("#734F96") ) ) @(CreateGauge() .ID("c6") .Value(85) .ValueIndicator(i => i .Type(GaugeIndicatorType.TriangleMarker) .Color("#f05b41") ) ) </div>

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

#gauge-demo { width: 100%; } #c1, #c2, #c3, #c4, #c5, #c6 { height: 110px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }