Code Samples: kendo radial gauge

Saturday, June 5, 2021

Kendo Radial Gauge Range Example

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 section transparent.

This is relatively easy but searching/googling for "kendo radial gauge transparent range" 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>