We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Flutter Treemap is a data visualization widget for creating an interactive treemap to visualize flat and hierarchical data as rectangles that are sized and colored based on quantitative variables using squarified, slice, and dice algorithms. It has features like selection, legends, labels, tooltips, color mapping, and much more.


Use different layouts based on algorithms–such as squarified, slice, and dice–to represent flat and hierarchically structured data.

Treemap Squarified Layout


Arrange rectangles in a row and wrap them with the next row, depending on the available space.

Treemap Slice Layout


Arrange all rectangles horizontally with the size of each rectangle determined by the quantitative variable and the available height.

Treemap Dice Layout


Arrange all rectangles vertically with the size of each rectangle determined by the quantitative variable and the available width.


Add any type of widget (like a text widget) to improve the readability of individual tiles by providing brief descriptions on labels.

Treemap Label Support


The levels to visualize data of the Treemap widget can be categorized into two types: flat level (single level) and hierarchical level (multiple levels).

Treemap Flat Level


Visualize a flat data collection in the Treemap widget.

Treemap Hierarchical Level


Arrange tiles in the form of nested rectangles. Each tile is filled with smaller rectangles representing sub-data. You can have more than one level to form a hierarchical treemap.


Categorize the tiles on the Treemap widget by customizing their color based on levels. It is possible to set the tile color for a specific value or for a range of values.

Treemap Value Color Mapping

Value color mapping

Apply a specific color to a tile based on its data. For example, apply colors to countries based on their membership in an organization.

Treemap Range Color Mapping

Range color mapping

Apply colors to tiles if their data falls within a specific range. For example, apply colors to countries based on their population density.


The legend provides information clearly about data plotted in the treemap.

Treemap Legend Position


Move the legend to any one of the four sides or to a custom position.

Treemap Custom Appearance


The default shape, size, and appearance of legend icons and text can be customized.

Treemap Solid Bar Legend

Solid bar legend

Render a legend as a bar and customize the positions of its labels as needed.

Treemap Gradient Bar Legend.

Gradient style

Use gradient colors as the legend bar background to show changes in regional data.


Highlight a tile to focus on a selected area. Use functionalities during this interaction, like page transitions, showing detailed information about a selected area, and more.

Treemap Selection Support


Display additional information about a tile using a completely customizable tooltip for the Treemap widget.

Treemap Tooltip Support

Custom background

Add any type of custom widget, such as an image widget, as a tile background to enrich the UI and enhance data visualization.

Treemap Image Background.


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile