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.

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

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:

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

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