New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Use Color Ranges

To set a color for an item so that all its siblings take a different shade of it as its own color, you have three options:

  • Use the underlying Kendo TreeMap widget and define the colors in its colors collection.
  • Add a field in your data source that contains the desired color for each item and point the DataColor property to it.
  • Create a Kendo Theme with the desired ranges (see Example 1). Make sure that the theme name matches the Skin name of the RadTreeMap.

Example 1: Create a Kendo Theme with custom color ranges.

ASP.NET
<telerik:RadTreeMap Skin="Metro" RenderMode="Lightweight" runat="server" ID="TreeMap1" Width="1000px" AlgorithmType="Squarified">
</telerik:RadTreeMap>
<script>
	; (function () {
		var kendo = window.kendo,
			dataviz = kendo.dataviz,
			deepExtend = kendo.deepExtend;

		var treeMapThemes = {};
		//theme name must be lowercase from the Skin property
		treeMapThemes["metro"] = {
			treeMap: {
				colors: [
						["#f89d26", "#7c5e33"],
						["#b8e54b", "#627b41"],
						["#52d5f6", "#397486"],
						["#ffd800", "#7f7623"],
						["#277db4", "#28516b"],
						["#01ae98", "#196560"],
						["#fffc00", "#7f8423"],
						["#f7742c", "#7b4e35"],
						["#9fcf2d", "#587235"],
						["#008bcb", "#195775"]
				]
			}
		};

		deepExtend(dataviz.ui, {
			themes: treeMapThemes
		});
	})();
</script>

See Also

In this article
See Also
Not finding the help you need?
Contact Support