We have already explored radar charts, and today we are going to talk about a chart type that many people underestimate. The Tree Map chart — or Treemap — is a way to display hierarchy through nested rectangles. The area of each rectangle is proportional to its value, and the nesting reflects structure: a category inside a category, a subcategory inside a subcategory. It is one of the most effective tools for data that has levels: file systems, project budgets, traffic structure by region and device, product catalogs.

In the world of IT and AI, hierarchical data is everywhere. Server logs are split by service, services — by endpoint, endpoints — by status code. Machine learning models have layers, layers — neurons. And if you want to see this entire structure at once without losing proportions, Treemap is exactly what you need. Today I will show you how it works, how to build it in Apache ECharts, and what to pay attention to so the chart actually works.

Key idea: Treemap is not just "pretty squares." It is a tool that reveals hierarchy and proportions at the same time. If your data has levels — and in IT and AI it almost always does — this chart type will give you what neither a pie chart nor a bar chart can.

What the Tree Map Chart Is and Why It Matters

Imagine you need to show the structure of a disk: folders, other folders inside them, and files inside those. A pie chart will not cope — it only shows one level. A bar chart will not either — it does not support nesting. But Treemap does. Each rectangle is a tree node. The larger the value, the larger the area. Nested rectangles show that one node is part of another.

In Apache ECharts, Treemap is implemented via series.type: 'treemap'. Data is passed as a tree structure: each node has name, value, and an optional children array. This can be a single root node or an array of root nodes. ECharts automatically calculates areas and arranges rectangles to fill the available space as efficiently as possible.

Here is what the basic data structure looks like:

  • Root node — for example, "Site traffic." It may not be displayed as a separate rectangle, but it sets the context.
  • Child nodes — "Cloudflare" and "Vercel." Their areas are proportional to their values.
  • Grandchildren — inside Cloudflare: "United States," "Uzbekistan," "Netherlands." Inside Vercel: "Hong Kong," "San Francisco."
  • Depth — how many levels to show. By default ECharts shows all of them, but this can be limited.

The key advantage of Treemap over other chart types is density. It uses all available space without leaving gaps. This makes it ideal for dashboards where every pixel counts.

Building a Treemap: Hands-On

Now — to practice. I built a Tree Map chart on data that readers of this blog are already familiar with: traffic for devitpro.uz. But this time I grouped it into a hierarchy. The root is "Traffic," the first level is providers (Cloudflare and Vercel), the second level is countries and regions. This way you can see how nesting works and how ECharts distributes areas.

Tree Map: traffic hierarchy for devitpro.uz
The root is "Site traffic." First level — providers. Second level — regions and countries. The area of each rectangle is proportional to the number of requests.
Hover over a rectangle to see the exact value and the path in the hierarchy. Click a node to zoom in.

What is important to notice here? First, Cloudflare and Vercel split the space proportionally: 64.87k versus 51.79k requests. Cloudflare is slightly larger. Second, inside Cloudflare you can see that the United States and Uzbekistan are the main countries, but there is also a "tail" of less active regions. Third, inside Vercel, Hong Kong dominates with 29,043 requests — more than half of all Vercel traffic. Treemap shows this instantly: Hong Kong's rectangle is visually the largest in its group.

If we used a pie chart, we would have to build two separate charts — one for Cloudflare, one for Vercel. Treemap combines them in a single space while preserving both proportions and hierarchy.

Settings That Make a Treemap Readable

A basic chart is only the beginning. ECharts offers many parameters that turn a Treemap from "just squares" into an analysis tool. Here is what I use most often.

Labels and readability

If a rectangle is too small, its label will not fit. ECharts automatically hides labels that do not fit, but this can be controlled via label.show and label.overflow. I usually keep labels only for sufficiently large nodes and make the rest available via the tooltip. This reduces visual noise.

Navigation and drill-down

Treemap in ECharts supports zoom and panning via roam: true. What is more, clicking a node can zoom into it if you set nodeClick: 'zoomToNode'. This turns a static chart into an interactive research tool. The user can "drill into" an interesting branch and return via the breadcrumb (breadcrumb).

For dashboards with deep hierarchies this is critical. Imagine you are analyzing logs by service. Clicking a service shows you its endpoints. Clicking an endpoint shows you status codes. Without drill-down, Treemap remains a flat picture.

Color and visual encoding

Color in a Treemap can do two things: distinguish categories or encode an additional metric. In ECharts there are visualDimension and visualMin/visualMax, which let you bind color to a value other than area. For example, area is the number of requests and color is the share of errors (5xx). Then you immediately see not only "where the traffic is high" but also "where the traffic is problematic."

In my chart, I used color to distinguish the first level: Cloudflare — blue, Vercel — green. This helps the eye quickly separate the two big groups. But if I had an "errors" metric, I would definitely encode it with color.

Treemap in IT and AI: Where It Really Works

Theory is good, but let us look at concrete scenarios where the Tree Map chart gives an advantage.

  • Log analysis and monitoring. Hierarchy: service → endpoint → status code. Treemap will show which service generates the most errors and which codes dominate inside it. This is faster than scrolling through tables.
  • Cloud spending. Hierarchy: provider → service → region. Area — cost. You immediately see where the money goes and which regions can be optimized.
  • ML model structure. Hierarchy: model → layers → parameters. Treemap will show which layers hold the most parameters — and therefore where the main computational load is.
  • File systems and storage. The classic case: folders → subfolders → files. Area — size. You immediately see what is taking up space.
  • Project structure. Modules → packages → classes. Area — lines of code or number of dependencies. Useful for refactoring.

In each of these scenarios Treemap works because the data is naturally hierarchical. If there is no hierarchy, use other chart types. But in IT and AI, hierarchy is the rule, not the exception.

A limitation worth remembering: Treemap reads poorly if there are too many nodes or they are too small. Try to limit depth to 3–4 levels and aggregate small categories into "Other." Otherwise the chart turns into a mush of microscopic rectangles that cannot be distinguished.

What I Took Away From This Experience

After working with Treemap, I started looking at hierarchical data differently. Before, I automatically reached for tables or bar charts even when the data had obvious levels. Now I first ask myself: "Is there nesting here?" If yes, Treemap almost always gives faster and deeper understanding.

Here are a few conclusions I wrote down for myself:

  • Treemap is for hierarchies, not for everything. If the data is flat, this chart type will only confuse.
  • Drill-down is a must-have. Without the ability to "drill into" a node, Treemap loses half its value for exploration.
  • Color must mean something. Either distinguish categories or encode a metric. Random colors are a missed opportunity.
  • Limit depth. 3–4 levels is optimal. Go deeper and the chart becomes unreadable on mobile screens.
  • ECharts makes Treemap accessible. Without complex code you get zoom, drill-down, breadcrumbs, and customization.
  • Hierarchy is the language of IT. Services, layers, modules, regions — these are all trees. Treemap speaks that language.

Verdict: Is It Worth Learning the Tree Map Chart in 2026?

Absolutely yes. In a world where system complexity grows exponentially, the ability to see structure is not a luxury but a necessity. Treemap gives exactly that: a simultaneous view of hierarchy and proportions. You do not just see "what is bigger" — you see "what is bigger inside what."

For an engineer, analyst, or data researcher, this means being able to find anomalies faster, understand resource distribution, and explain complex structures to others. For those working with AI, Treemap is also a way to visualize the internal structure of models: layers, parameters, activations.

For me personally, this breakdown was another step in understanding how the form of visualization influences thinking. When data is presented in the right form, the brain works more efficiently. Treemap is the form that matches the nature of hierarchical data. And if you learn to use it, you will gain an advantage in any field of IT and AI.