Example of Layout in Javascript TreeMap Control

/
/
Layout

This sample illustrates the GDP nominal of top 10 countries in the year 2015. The layout and rendering direction of the TreeMap can be changed by using the Layout Type and Render Direction in the properties panel.

More Details...

Top 10 countries by GDP Nominal - 2015United States$17946 Trillion(11.08 %)China$10866 Trillion(28.42 %)Japan$4123 Trillion(-30.78 %)Germany$3355 Trillion(-5.19 %)United Kingdom$2848 Trillion(8.28 %)France$2421 Trillion(-9.69 %)India$2073 Trillion(13.65 %)Italy$1814 Trillion(-12.45 %)Brazil$1774 Trillion(-27.88 %)Canada$1550 Trillion(-15.02 %)
Layout Type
Render Direction
Description

In this example, you can change the layout of the TreeMap as desaturation color mapping has been applied to denote the weightage of the items by varying the fill color. The label's text also has been formatted and placed in multiple lines. The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch-enabled devices. More information on treemap layout can be found in this documentation section.