Tickmarks

Tickmarks may be shown along the face to help users read the gauge. Their visibility and position are controlled by the 'showTicks', 'tickSpacing', and 'step' properties.

The tickmark color and width can be defined in CSS or in code.

Tickmarks
Spacing

Width

Color

// This file locates: "Scripts/Lesson/C1Gauge/ElementsTickmarks.js".
c1.documentReady(function () {
    var theGauge = wijmo.Control.getControl('#theGauge');
    var tickSpacing = wijmo.Control.getControl('#tickSpacing ');
    var tickColor = wijmo.Control.getControl('#tickColor ');
    var tickWidth = wijmo.Control.getControl('#tickWidth ');
 
    // customize tickmarks
    document.getElementById('showTicks').addEventListener('click', function (e) {
        theGauge.showTicks = e.target.checked;
    });
 
    tickSpacing.value = theGauge.tickSpacing;
    tickSpacing.valueChanged.addHandler(function (s, e) {
        theGauge.tickSpacing = s.value;
    });
 
    tickColor.valueChanged.addHandler(function (s, e) {
        var style = theGauge.hostElement.querySelector('.wj-ticks').style;
        style.stroke = s.value;
    });
 
    tickWidth.valueChanged.addHandler(function (s, e) {
        var style = theGauge.hostElement.querySelector('.wj-ticks').style;
        style.strokeWidth = s.value;
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/ElementsTickmarks.css".
.wj-gauge {
  height: 150px;
  margin: 20px auto;
  padding: 12px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
}
.wj-gauge .wj-ticks {
  stroke: white;
  stroke-width: 2px;
}
label {
  width: 120px;
  text-align: right;
}
.wj-dropdown,
.wj-inputnumber {
  width: 120px;
  margin-bottom: 6px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1GaugeController : Controller
    {
        // GET: ElementsTickmarks
        public ActionResult ElementsTickmarks()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.ElementsTickmarks_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text2)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="showTicks">@Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text3)</label>
        <input id="showTicks" type="checkbox" checked="checked">
        <br />
        <label for="tickSpacing">@Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text4)</label>
        @Html.C1().InputNumber().Id("tickSpacing").Min(0).Max(100).Step(5).Format("n0")
        <br />
        <label for="tickWidth">@Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text5)</label>
        @Html.C1().InputNumber().Id("tickWidth").Min(0).Max(5).Step(0.25).Format("n1").Value(2)
        <br />
        <label for="tickColor">@Html.Raw(Resources.C1Gauge.ElementsTickmarks_Text6)</label>
        @Html.C1().InputColor().Id("tickColor").Value(System.Drawing.Color.White)
    </div>
    <div class="col-xs-6">
        @(Html.C1().RadialGauge().Id("theGauge")
            .StartAngle(-30).SweepAngle(240)
            .Value(50).Max(100)
            .IsReadOnly(false)
            .HasShadow(false)
            .ShowText(ShowText.All)
            .ShowTicks(true)
            .TickSpacing(10)
            .Pointer(p=>p.Thickness(0.5))
        )
    </div>
</div>