# Tree Map Chart

## 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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FRRLdNqjQGQcK5eX8PuPR%2Fstep%201.jpg?alt=media&#x26;token=dcf175be-56b4-428a-a45b-8941fb771481" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FoVmF3O5Cqn35LiNSN5NY%2Fstep%202.jpg?alt=media&#x26;token=05c1fc1e-8f8c-434a-9ae8-a7b92d414c69" alt=""><figcaption></figcaption></figure>

***

#### 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**&#x20;

Upload a `.csv` or `.xlsx` file directly using the **drag & drop** area or the **browse** button.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FhxGxHn3suUikAFMqBbzW%2Fstep%203.jpg?alt=media&#x26;token=f1a02427-2512-4f00-a73f-de7f5b6b004e" alt=""><figcaption></figcaption></figure>

**📌 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):**

1. **Location** – The node name (e.g., country, region, or entity)
2. **Parent** – The parent node this item falls under
3. **Size Metric** – Numerical value for sizing (e.g., trade volume)
4. **Color Metric** – Numerical value used to apply color shading (e.g., change %, margin)

***

**✅ Example Table Format:**

| Location | Parent  | Market Trade Volume (Size) | Market Change (Color) |
| -------- | ------- | -------------------------- | --------------------- |
| 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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FuVPyzO8gKihQcvrLYhZM%2Fstep%204.jpg?alt=media&#x26;token=7f884bbc-260f-40c3-8b6f-8fda3e6b0c39" alt=""><figcaption></figcaption></figure>

***

#### 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., `Location` or `Category`).
* **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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FJ8poxo2MCFrxpCQp8tx8%2Fstep%205.jpg?alt=media&#x26;token=37ee53fe-5bcf-439d-bec5-a925394945b2" alt=""><figcaption></figcaption></figure>

***

#### 🟩 **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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FvaBupQ0EiXfi45SQGO2z%2FTreemap%20View%20Level%201.jpg?alt=media&#x26;token=dba07e64-7072-4607-9986-bc9759104f6b" alt=""><figcaption></figcaption></figure>

***

#### 🟦 **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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2FXlSxPiBBcbgUApFFkV2h%2FTreeMap%20View%20Level%202.jpg?alt=media&#x26;token=b289b92f-4690-43d0-a76e-95715e7c0987" alt=""><figcaption></figcaption></figure>

***

#### 🟨 **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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fh5C31edKGYkWK1RIuJEc%2FTreeMap%20View%20Level%203.jpg?alt=media&#x26;token=530f8ed1-5f1c-4d6f-83d2-11ee024a4e07" alt=""><figcaption></figcaption></figure>

***

#### 4. Style Your Chart

Click **Advanced Editor** to open the style configuration panel.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2Fjdq9otFrr6s6oYdOFpkv%2Fadvance%20editor.jpg?alt=media&#x26;token=0feecdc4-6bd7-478d-9512-67ee45046be9" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://2441185785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeTNY9XuZbora2UmeM4sm%2Fuploads%2F5B2daGA63mMfqOgqr2hC%2Fstyle%20configuration.jpg?alt=media&#x26;token=003221c7-d71e-4783-9ec7-bf34feb82cbf" alt=""><figcaption></figcaption></figure>

***

#### 6. Save and Preview the Final Chart

Once satisfied with your settings, preview the chart and click **Save**.
