Tree Map Chart
In this article, we will explain how to create and customize a Annotation chart. So let's get started!
Creating a Tree Map Chart
What is a Tree Map Chart and When to Use It
A Tree Map Chart is a hierarchical visualization that uses nested rectangles to represent data. Each rectangle's size is proportional to a numerical value such as revenue, and rectangles are grouped by categories like regions, countries, or product types.
When to Use a Tree Map Chart
Use a Tree Map when:
You want to show part-to-whole relationships.
You need to compare values within nested categories.
You’re working with large, hierarchical datasets that need to be visualized compactly.
Example Use Case
Imagine you're analyzing revenue by region, country, and product category. A Tree Map lets you instantly see which regions and products generate the most income, with each nested block proportionally sized by revenue.
Steps to Create a Tree Map Chart
1. Enter Prompt and Proceed
Begin by describing what kind of insight you're looking for in plain language. The AI engine relies on this prompt to understand your intent and generate the most relevant chart.
Tip: The more descriptive your prompt, the more accurate and tailored your visualization will be.
📌 Example Prompt:
"Visualize revenue breakdown using a Tree Map grouped by region, then country, then product category, sized by total sales."
Click Next after entering the prompt.
2. Select the Data Source
After entering your prompt, the next step is to provide the data that will feed into the Tree Map visualization.
You have two options:
A. Use an Existing Data Source
Select a dataset from previously uploaded or connected files (e.g., file_gc_detailed_revenue) listed in the interface.
B. Upload a New File
Upload a .csv or .xlsx file directly using the drag & drop area or the browse button.
📌 Data Compatibility & Structure
To ensure your TreeMap chart renders correctly, your dataset must follow a strict hierarchical structure. The first row should define column headers, and each subsequent row should represent a node in the hierarchy.
✅ Required Format (Columns):
Location – The node name (e.g., country, region, or entity)
Parent – The parent node this item falls under
Size Metric – Numerical value for sizing (e.g., trade volume)
Color Metric – Numerical value used to apply color shading (e.g., change %, margin)
✅ Example Table Format:
Global
null
0
0
America
Global
0
0
Europe
Global
0
0
Asia
Global
0
0
USA
America
52
31
Mexico
America
24
12
Italy
Europe
17
4
UK
Europe
21
-5
China
Asia
36
4
Click Next after choosing or uploading your dataset.
3. Configure Data Mapping
Now you’ll define how your dataset maps to the chart. This is where you structure your Tree Map hierarchy.
Fields to Fill:
Node: This is the lowest-level element (e.g.,
LocationorCategory).Parent Node: A higher level group that the node falls under (e.g.,
Country,Region).Size of Node: The metric to control rectangle size (e.g.,
Sum of Revenue).Color of Node: (Optional) You can use a different metric or dimension for color coding (e.g., Profit Margin).
Order By: (Optional) Decide how to sort blocks within their parent group.
Additional Options:
Filters: Apply conditions (e.g., filter for current year or product types).
Limit Rows To: Control the number of nodes rendered for clarity.
⚠️ Accurate field mapping ensures the chart correctly reflects your dataset’s hierarchy.
Click Apply after mapping.
🟩 Tree Map View 1: Regional Revenue Overview
This view displays the top-level breakdown by Region (e.g., Asia, Europe, North America). Each block represents a region, sized by total revenue and colored by performance indicators.
🟦 Tree Map View 2: Country-Level Revenue Distribution
This intermediate view drills down into countries within each region. It helps identify which countries contribute most to their parent region’s revenue.
🟨 Tree Map View 3: Product or Transaction-Level Insights
This most granular view shows individual product categories or transactions nested under their respective countries. It enables fine-tuned analysis of item-level revenue trends.
4. Style Your Chart
Click Advanced Editor to open the style configuration panel.
Use the style tab on the right to tweak visual details:
Chart Background: Set colors or gradient fills.
Colors: Apply consistent palettes or dynamic coloring.
Other: Fine-tune border radius, font, padding, etc.
6. Save and Preview the Final Chart
Once satisfied with your settings, preview the chart and click Save.
Last updated
