• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Color Mapping in ASP.NET Core TreeMap Control

This sample visualizes the top 10 largest islands in the world based on area. The color mapping is applied to the items to differentiate them from other items.

DEMO
SOURCE
Color Mapping Type

In this example, you can see how to render a tree map with color mapping. The range color mapping and desaturation color mapping group the shapes based on the area size, whereas the equal color mapping groups the shapes based on the continent value. The legend is enabled in this example to represent each color mapping.

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.


Injecting Module

The TreeMap component features are segregated into individual modules by feature. To use a legend, inject the Legend module using the TreeMap.Inject(TreeMapLegend) method.

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