Trusted by the world’s leading companies
Overview
The Flutter Treemap is a data visualization widget for creating an interactive tree map 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, and color mapping.
Layouts
Use different layouts based on algorithms—squarified, slice, and dice—to represent flat and hierarchically structured data.
Squarified
Arrange rectangles in a row and wrap them with the next row, depending on the available space.
Slice
Arrange all rectangles horizontally with the size of each rectangle determined by the quantitative variable and the available height.
Dice
Arrange all rectangles vertically with the size of each rectangle determined by the quantitative variable and the available width.
Layout direction
Arrange the tiles in a squarified layout in different directions.
Top left
Arrange the tiles from left to right, starting at the top and ending at the bottom.
Top right
Arrange the tiles from right to left, starting at the top and ending at the bottom.
Bottom left
Arrange the tiles from left to right, starting at the bottom and ending at the top.
Bottom right
Arrange the tiles from right to left, starting at the bottom and ending at the top.
Sorting
Sort tiles in a slice-and-dice tree map.
Slice descending
Slice ascending
Dice descending
Dice ascending
Labels
Add any type of widget (like a text widget) to improve the readability of individual tiles by providing brief descriptions on labels.
Levels
There are two types of tree map levels: flat level (single level) and hierarchical level (multiple levels).
Flat
Visualize a flat data collection in the Treemap widget.
Hierarchical
Arrange tiles in the form of nested rectangles. Each tile is filled with smaller rectangles representing subdata. You can have more than one level to form a hierarchical tree map.
Colors
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.
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.
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.
Legend
The legend provides information clearly about data plotted in a tree map.
Position
Move the legend to any one of the four sides or to a custom position.
Appearance
The default shape, size, and appearance of legend icons and text can be customized.
Solid bar legend
Render a legend as a bar and customize the positions of its labels as needed.
Gradient style
Use gradient colors as the legend bar background to show changes in regional data.
Legend pointer
Place a pointer at the top of the legend, while hovering over tiles.
Selection
Highlight a tile to focus on a selected area. Use functionalities during this interaction, like page transitions and showing detailed information about a selected area.
Tooltip
Display additional information about a tile using a completely customizable tooltip.
Drill-down
The drill-down provides a large amount of data that can be visualized easily. The child item details are visualized while tapping the parent tile.
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.
All our Flutter UI & DataViz Widgets
Our Customers Love Us
Rated by users across the globe
Awards
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.
