How to change pointer length in Kendo radial gauge

Question

You can change the width of the pointer by setting the cap:size value, but I need to change the length of the pointers so that they are in a tiered fashion representing 5 different points in time. How can this be done?

function createGauge() {
  $("#gauge").kendoRadialGauge({
    pointer: [{
      value: 10,
      color: "#c20000",
      cap: {
        size: 0.19
      }
    }, {
      value: 70,
      color: "#ff7a00",
      cap: {
        size: 0.15
      }
    }, {
      value: 140,
      color: "#ffc700",
      cap: {
        size: 0.11
      }
    }, {
      value: 350,
      color: "#ffe700",
      cap: {
        size: 0.07
      }
    }, {
      value: 313,
      color: "#fff700",
      cap: {
        size: 0.03
      }
    }],
    scale: {
      minorUnit: 5,
      startAngle: 90,
      endAngle: 450,
      max: 360
    }
  });
}
$(document).ready(function() {
  createGauge();

  $("#example .slider").each(function() {
    $(this).kendoSlider({
      min: 0,
      max: 360,
      showButtons: true,
      change: function() {
        var id = this.element.attr("id");
        var pointerIndex = id.substr(id.length - 1);
        var gauge = $("#gauge").data("kendoRadialGauge");
        gauge.pointers[pointerIndex].value(this.value());
      }
    });
  });

  $("#getValues").click(function() {
    alert("All values: " + $("#gauge").data("kendoRadialGauge").allValues().join(", "));
  });

  $("#setValues").click(function() {
    var values = $("#newValues").val().split(",");

    values = $.map(values, function(val) {
      return parseInt(val);
    });

    $("#gauge").data("kendoRadialGauge").allValues(values);
  });

  $(document).bind("kendo:skinChange", function(e) {
    createGauge();
  });
});

#gauge {
  width: 33em;
  height: 33em;
  //margin: 0 auto 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="gauge-container">
  <div id="gauge"></div>
</div>

Answer 1

Yes, you can change the pointer length now. pointer.length:

The pointer length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5.

function createGauge() {
  $("#gauge").kendoRadialGauge({
    pointer: [{
      value: 10,
      color: "#c20000",
      cap: {
        size: 0.19
      },
      length: 1,
    }, {
      value: 70,
      color: "#ff7a00",
      cap: {
        size: 0.15
      },
      length: 0.8,
    }, {
      value: 140,
      color: "#ffc700",
      cap: {
        size: 0.11
      },
      length: 0.6,
    }, {
      value: 350,
      color: "#ffe700",
      cap: {
        size: 0.07
      },
      length: 0.5,
    }, {
      value: 313,
      color: "#fff700",
      cap: {
        size: 0.03
      },
      length: 0.4,
    }],
    scale: {
      minorUnit: 5,
      startAngle: 90,
      endAngle: 450,
      max: 360
    }
  });
}
$(document).ready(function() {
  createGauge();

  $("#example .slider").each(function() {
    $(this).kendoSlider({
      min: 0,
      max: 360,
      showButtons: true,
      change: function() {
        var id = this.element.attr("id");
        var pointerIndex = id.substr(id.length - 1);
        var gauge = $("#gauge").data("kendoRadialGauge");
        gauge.pointers[pointerIndex].value(this.value());
      }
    });
  });

  $("#getValues").click(function() {
    alert("All values: " + $("#gauge").data("kendoRadialGauge").allValues().join(", "));
  });

  $("#setValues").click(function() {
    var values = $("#newValues").val().split(",");

    values = $.map(values, function(val) {
      return parseInt(val);
    });

    $("#gauge").data("kendoRadialGauge").allValues(values);
  });

  $(document).bind("kendo:skinChange", function(e) {
    createGauge();
  });
});

#gauge {
  width: 33em;
  height: 33em;
  //margin: 0 auto 0;

}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
<div id="gauge-container">
  <div id="gauge"></div>
</div>

Answer 2

I used in ANGULARJS below code is used to reduce the length of the pointer.

gauge.options.scale.labels = { 
       border: {  width:13  } 
 };

I used label position as 'outside'.

Answer 3

According to Telerik you can't. At least for the current version. http://www.telerik.com/forums/change-length-of-radial-gauge-pointer