Example of Layout in ASP.NET Core TreeMap Control

TreeMap
Layout

This sample illustrates the details of GDP Nominal of top 10 countries in the year 2015. Layout of the treemap can be changed by using the Layout Type in properties panel.

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 %)
Properties
Layout Type
Render Direction

In this example, you can change the layout of the treemap and we have applied desaturation color mapping, to denote weightage of the items by varying the fill color. Also we have formatted the labels text and placed it in multiple lines.

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.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab