A treemap shows hierarchical, part-to-whole data as nested rectangles, where each rectangle's area is proportional to its value. Bigger rectangles mean bigger values, and rectangles nest inside their parent category - revenue by region, then by product within each region, for example - so both the breakdown structure and the relative size of each part are visible at once.

Which fields control the hierarchy, the size, and the color?

Each Column field becomes one level of the hierarchy, in the order you assign them - up to 4 levels. The first Row field sets rectangle size, summed within each level. An optional second Row field, when assigned, switches color from automatic size-ranking to that second measure's value, averaged within each level - useful for showing a rate-like metric (margin, score, conversion rate) layered on top of a size-based breakdown.

How does color work with only one measure assigned?

With only the size measure assigned, color is automatic: rectangles are ranked from largest to smallest value and colored along a gradient based on that rank, not any particular number. Assigning a second Row field switches this off and colors strictly by that second measure's actual value instead.

Can I click into a category to see its breakdown?

Yes. Clicking any rectangle zooms into that category, revealing its children at the next hierarchy level. A breadcrumb trail appears showing the drill path, and clicking an earlier breadcrumb step navigates back up. This click-to-zoom behavior is always on and isn't a setting you can turn off.

What happens with very deep or very wide hierarchies?

Only the top hierarchy level renders as visible rectangles by default - deeper levels only appear once you click into a parent rectangle, rather than all levels being visible nested inside each other simultaneously. A hierarchy with many distinct values at one level produces many small rectangles, which can get difficult to read; filtering to the most relevant categories keeps each level legible.

When should I use a treemap instead of a pie chart or bar chart?

Use a treemap when the data has real hierarchy - categories within categories - and you want both the breakdown structure and relative size visible together. Use a pie chart for a single flat breakdown with no hierarchy, or a bar chart when precise value comparison matters more than the nested structure.

Why does color look flat or barely different after I drill into a category?

The color gradient's range is calculated once from the entire dataset, not recalculated for whatever sub-category you've zoomed into. If a sub-category's values only span a small slice of the overall range, every rectangle inside it can end up a similar shade even though they differ from each other - the gradient simply isn't recalibrated to that narrower local range.

Treemap | Edilitics Docs

Show hierarchy and proportion together as nested rectangles, sized by one measure and optionally colored by a second. Best for part-to-whole breakdowns.

A treemap shows hierarchical, part-to-whole data as nested rectangles, with each rectangle's area proportional to its value. Drop 1 to 4 categorical or date fields into Column, in the order you want the hierarchy to nest, and 1 to 2 numeric fields into Row - the first sets rectangle size, the optional second sets color. Use it when both the breakdown structure and the relative size of each part need to be visible together.

When to Use

A treemap answers "how is this total broken down, and which parts dominate" in one view - revenue by region and then by product within each region, storage by folder and then by file type, headcount by department and then by team. The rectangle sizes make proportion immediately visible without reading a single number, and the nesting shows the hierarchy structure a flat pie chart or bar chart can't represent.

A second Row field changes what color means. With just one measure assigned, color is automatic - rectangles are ranked by size and colored along a gradient based on that ranking, not a specific value. Assign a second Row field and color switches to reflect that field's actual value instead (averaged within each level), independent of size - useful for spotting categories that are big but underperforming on a separate metric like margin or score.

Switch to a different chart when:

Your data has no real hierarchy - it's one flat breakdown - use a Pie Chart or Donut Chart
Precise value comparison matters more than relative area - use Horizontal Bar
You need a strict parent-child tree structure rather than nested area, especially for sparse or uneven hierarchies - use a Tree Chart

Scenario	Hierarchy (Columns)	Size (Row 1)	Color (Row 2, optional)
Revenue breakdown by region and product	Region, Product	Revenue	Profit margin
Storage usage by folder and file type	Folder, File type	File size	Average file age
Headcount by department and team	Department, Team	Headcount	Average tenure
Portfolio allocation by sector and holding	Sector, Holding	Allocation amount	Year-to-date return
Support volume by category and issue type	Category, Issue type	Ticket count	Average resolution time

Required Inputs

Field	Type	Count
Dimension (Hierarchy levels)	Categorical or Date	1 to 4
Measure (Size, then optional Color)	Numeric	1 to 2

For step-by-step build instructions, see Build Your First Chart.

Formatting Options

The Format tab unlocks after at least the hierarchy and size measure are assigned.

Style

Use the chart title to state what the rectangles represent, since the hierarchy alone doesn't always make the size measure obvious.

Control	What it does
Show Chart Title	Shows or hides the title.
Enter Chart Title	Title text. Maximum 50 characters.
Font family	Font applied to the title.
Font size	5 to 30.
Bold / Italic	Weight and style.
Alignment	Left, center, or right within the chart container.

Treemap Styles controls sort order, the color gradient's two ends, and the rectangle borders.

Control	What it does
Sort Order	Descending (default), Ascending, or None - the order rectangles are arranged within each level.
Start Color / End Color	The gradient's two ends. With one measure assigned, these span the size-rank gradient; with two, they span the color measure's actual value range.
Border Width	0 to 5px. Thickness of the line separating rectangles.
Border Color	Color of that border line.
Border Radius	0 to 20px. Rounds rectangle corners.
Show Labels	Shows or hides the category name printed on each rectangle.
Font Family / Color / Font size / Bold / Italic	Styling for rectangle labels, when shown.
Text Case	Uppercase, lowercase, capitalize, or none.

The breadcrumb shows the drill path after clicking into a rectangle, and lets you navigate back up - it's the only way back to a higher level once you've zoomed in, since clicking to drill down is always on.

Control	What it does
Show Breadcrumb	Shows or hides the breadcrumb trail.
Background Color	Background of each breadcrumb step.
Font Family / Color / Font size / Bold / Italic	Styling for the breadcrumb text.
Alignment	Left, center, or right.

Interactivity

The tooltip appears on hover over a rectangle, showing its position in the hierarchy and its size value - plus its color measure's value, when a second Row field is assigned.

Control	What it does
Show Tooltip	Shows or hides the tooltip entirely.
Header / value text styling	Font, size, and color for the lines shown in the tooltip.

Animation controls the rectangles' transition when the chart first renders, when you drill into a category, or when the data changes.

Control	What it does
Enable Animation	Turns the transition animation on or off.
Duration	How long the transition takes.
Delay	How long the transition waits before starting.
Easing Function	The transition curve.

Emphasis controls the visual response when hovering a rectangle - a scale-up effect and a drop shadow. Off by default.

Control	What it does
Show Emphasis	Turns hover effects on.
Focus Type	Item, Series, or None.
Enable Scale	Scales the hovered rectangle up slightly.
Scale Size	1.0x to 2.0x.
Shadow Blur / Color / Offset X / Offset Y	Drop shadow styling on the hovered rectangle.
Border Width	Border added around the hovered rectangle.

Enable the Toolbox when viewers need to export the chart or inspect its underlying data.

Control	What it does
Show Toolbox	Shows or hides the toolbox icon bar.
Save as Image	Adds a download icon that saves the chart as a PNG.
Data View	Adds an icon that opens the underlying data table in a separate view.

Best Practices

Assign a second Row field only when the color measure genuinely differs from size. Color-by-rank (the one-measure default) already highlights big-versus-small visually through area alone. A second measure is worth adding specifically when "big" and "high color value" diverge - a category that's large but low-margin, for example - since that contrast is the whole point of dual-encoding.

Order Column fields by how you want the hierarchy to nest. The first Column field becomes the outermost grouping, the second nests inside it, and so on up to 4 levels. Reassign the field order if the breakdown reads backwards from what makes sense for your audience.

Keep each hierarchy level's category count manageable. A level with dozens of distinct values produces many small rectangles that are hard to label and compare. Filter to the most relevant categories, or reduce the number of hierarchy levels, rather than relying on the chart to make a wide breakdown readable.

Remember only the top level is visible until you click in. A treemap doesn't show every nested level simultaneously by default - clicking a rectangle drills into its children, and the breadcrumb is how you navigate back out. If a static, fully-expanded view of every level is what's needed, a treemap's default drill-down behavior may not be the right fit.

Use Sort Order deliberately when rectangle position matters for the story. Descending (the default) puts the largest rectangle first; switching to Ascending or None changes the reading order without changing any underlying value.

FAQs

Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.

Treemap