This article is an example of a scale range in a Kendo Radial Gauge Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to make the scale range UI transparent.
This is relatively easy but searching/googling for “kendo radial gauge transparent” did not provide relevant results. To make the scale range transparent, we just provide a transparent value or a color with a transparent alpha channel to the rangePlaceholderColor option. It’s that simple. I guess it was so simple that nobody bothered to google it. Anyway, here is the example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo Radial Gauge Range Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />
<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>
</head>
<body>
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
transitions: false,
pointer: {
value: 40
},
scale: {
min: 0,
max: 100,
ranges: [{
from: 70,
color: "red"
}],
// rangePlaceholderColor: "rgba(0, 0, 0, 0)", // transparent alpha channel, rgba notation
rangePlaceholderColor: "transparent", // simplest
// rangePlaceholderColor: "#00000000", // transparent alpha channel #rrggbbaa, in hex
}
});
</script>
</body>
</html>Without transparency:
With transparency:
There you have it. A quick and simple example of how to have a transparent range in Kendo Radial Gauge.