If the gauge must display a huge range of values (e.g. Min=0, Max=500 000) having visible MinorTicks blocks the browser and ultimately throws an "out of stack space error". The workaround is to set MinorTicks.Visible = false or Scale.MinorUnit to a sufficiently large value. If the minor unit is not set properly the minor ticks will clutter together and will be unreadable.
There are some issues with the appearance of the gauges in RTL mode. They vary across browsers. An easy fix is to add a CSS class to each of them and force direction: ltr: <telerik:RadRadialGauge CssClass="rtlFix" ID="radialGauge1" runat="server" Width="272px" Height="272px"> . . . . . </telerik:RadRadialGauge> .rtlFix { direction: ltr; } If you need to swap the places of the min and max value the Reverse property of the Scale inner tag must be set to true.
The following: <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" width=100%></telerik:RadLinearGauge> will result in the width being set as 100px
Workaround:
1) Use RenderAs="SVG".
2) Set 100% width to the gauge's wrapper prior the resizing
Use the solution below to make the control responsive:
<table style="width: 100%;">
<tr>
<td>
<div style="width: 100%;" id="gauge"></div>
<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" RenderAs="SVG" Width="100%">
<Pointer Color="Gray" Size="10" />
<Scale Vertical="false" Min="0" Max="40">
<MinorTicks Size="20" />
<Ranges>
<telerik:GaugeRange Color="#D7E5D1" From="0" To="10" />
<telerik:GaugeRange Color="#EBE6D2" From="10" To="20" />
<telerik:GaugeRange Color="#F5D2D1" From="20" To="30" />
</Ranges>
</Scale>
</telerik:RadLinearGauge>
</td>
</tr>
</table>
<script type="text/javascript">
var $ = $telerik.$;
$(window).resize(function () {
$("#<%= RadLinearGauge1.ClientID %> > div")[0].style.width = "100%";
$find('<%= RadLinearGauge1.ClientID %>').get_kendoWidget().resize();
});
</script>
The underlying Kendo Linear Kendo stopped rendering the track in 2014.3.1314 and, respectively, so does RadLinearGauge as of 2015.1.225 For example, the following snippet should render a wide, green, semi-transparent track, but it does not <telerik:RadLinearGauge ID="gauge" runat="server" Height="280"> <Pointer Value="20"> <Track Color="#5ca038" Opacity="0.5" Size="30" /> </Pointer> </telerik:RadLinearGauge>