For the time being you can use the following workaround:
<script>
var pointerSize = 35;
function pageLoad() {
var gauge = $find("<%=rgEpmScorecard.ClientID%>");
gauge._gaugeObject.options.scale.rangeSize = 25;
gauge.repaint();
}
</script>
<telerik:RadRadialGauge ID="rgEpmScorecard" runat="server" Skin="Metro" Height="99px" Width="100px">
<Pointer Value="50" Color="Black">
<Cap Size="0.5" Color="Black" />
</Pointer>
<Scale MajorUnit="10" Max="100" Labels-Visible="false" StartAngle="-45" EndAngle="225">
<MajorTicks Visible="false" />
<MinorTicks Visible="false" />
<Ranges>
<telerik:GaugeRange Color="#ac1d23" From="0" To="16.67" />
<telerik:GaugeRange Color="#c26522" From="16.7" To="33.33" />
<telerik:GaugeRange Color="#d2b408" From="33.5" To="50" />
<telerik:GaugeRange Color="#b5be25" From="50.04" To="66.66" />
<telerik:GaugeRange Color="#0c833f" From="66.8" To="83.33" />
<telerik:GaugeRange Color="#0b6cb3" From="83.38" To="100" />
</Ranges>
</Scale>
</telerik:RadRadialGauge>
<script>
var dataviz = kendo.dataviz,
draw = dataviz.drawing,
Path = draw.Path,
DEFAULT_LINE_WIDTH = 0.5;
kendo.dataviz.RadialPointer.fn._renderNeedle = function () {
var that = this;
var options = that.options;
var minorTickSize = that.scale.options.minorTicks.size;
var center = that.center;
var needleColor = options.color;
var needlePath = new Path({
fill: { color: needleColor },
stroke: { color: needleColor, width: DEFAULT_LINE_WIDTH }
});
needlePath.moveTo(center.x + that.radius - minorTickSize + pointerSize, center.y)
.lineTo(center.x, center.y - (that.capSize / 2))
.lineTo(center.x, center.y + (that.capSize / 2))
.close();
return needlePath;
}
</script>