# Treemap

**Treemaps** are used to display **hierarchical data**. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category.

## The Method To Use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.treemap()`

It must contain the following input variables:

```python
order: int
data: Union[str, Dict, List[Dict]]
```

And can be personalized with the input variable:

```python
radial: bool 
vertical: bool
title: Optional[str]
padding: Optional[List[int]]
rows_size: Optional[int] 
cols_size: Optional[int]
option_modifications: Optional[Dict]
```

#### Video demonstration of the treemap chart <a href="#video-demonstration-of-the-treemap-chart" id="video-demonstration-of-the-treemap-chart"></a>

{% embed url="<https://api.media.atlassian.com/file/3d2b59fd-b7a5-4b74-b22e-8121a30b9e23/artifact/video_1280.mp4/binary?client=acb7ab48-9de5-4698-bc3e-5e7ecb6bc0a7&collection=contentId-455770115&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhY2I3YWI0OC05ZGU1LTQ2OTgtYmMzZS01ZTdlY2I2YmMwYTciLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC00NTU3NzAxMTUiOlsicmVhZCJdfSwiZXhwIjoxNjQ3NDM0MTIwLCJuYmYiOjE2NDc0MzExODB9.BwkrX-v-Jvkg7oXcWTO4tfgmvBCMM3dmh3r-LBNMftc>" %}
Treemap chart settings and usage.
{% endembed %}

## Examples <a href="#examples" id="examples"></a>

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

```python
data = [{
    'name': 'root',
    'value': 500,
    'children': [
        {
            'name': 'Child A',
            'value': 150,
            'children': [
                {'name': 'Child A1', 'value': 100},
                {'name': 'Child A2', 'value': 30},
                {'name': 'Child A3', 'value': 20},
            ],
        },
        {
            'name': 'Child B',
            'value': 250,
            'children': [
                {'name': 'Child B1', 'value': 150},
                {'name': 'Child B2', 'value': 70},
                {'name': 'Child B3', 'value': 30},
            ],
        },
        {
            'name': 'Child C',
            'value': 100,
            'children': [
                {'name': 'Child C1', 'value': 70},
                {'name': 'Child C2', 'value': 20},
                {'name': 'Child C3', 'value': 10},
            ],
        },
    ],
}]

s.plt.treemap(data=data, order=0)
```

![The treemap chart is in the default configuration.](/files/hBHv0qxRKsnV7beWU22c)

{% hint style="info" %}
The chart has tooltips, showed when you hover the mouse over the figure. The area of each rectangle is proportional to that number.
{% endhint %}

### 2. Customization And Context <a href="#id-2.-title-for-the-chart-and-changing-data" id="id-2.-title-for-the-chart-and-changing-data"></a>

```python
data = [{
    'name': 'WebStore',
    'value': 500,
    'children': [
        {
            'name': 'Info Tech',
            'value': 150,
            'children': [
                {'name': 'tablets', 'value': 100},
                {'name': 'laptops', 'value': 30},
                {'name': 'printers', 'value': 20},
            ],
        },
        {
            'name': 'Electronics',
            'value': 250,
            'children': [
                {'name': 'Camera', 'value': 150},
                {'name': 'Cell Phone', 'value': 70},
                {'name': 'GPS', 'value': 30},
            ],
        },
        {
            'name': 'Heating',
            'value': 100,
            'children': [
                {'name': 'Temp Control', 'value': 70},
                {'name': 'Filters', 'value': 20},
                {'name': 'Sensors', 'value': 10},
            ],
        },
    ],
}]

s.plt.treemap(
    data=data, order=0,
    title='Total Sales by Department - Webstore',
    rows_size=2, cols_size=10, padding='0,0,0,2',
)
```

![Custom treemap](/files/9SXdk2Ds2e9O3J1enuUE)

{% hint style="info" %}

### Featured Content

[Changing the Menu Path](/dev/building-web-app/menu/changing-the-menu-path.md)\
The `menu_path` can be modified.<br>

[Using the Grid](/dev/building-web-app/grid/using-the-grid.md)

It is possible to use any number of rows.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shimoku.com/dev/elements/charts/treemap.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.