# Tree

**Tree charts** or maps are primarily used to **display data that is grouped and nested** in a hierarchical (or tree-based) structure.

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

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

It must contain the following input variables:

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

And accepts the following input variable as optional:

```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 tree chart <a href="#video-demonstration-of-the-tree-chart" id="video-demonstration-of-the-tree-chart"></a>

{% embed url="<https://api.media.atlassian.com/file/5d85a6be-75d8-4177-b918-9ea1aea8aaa0/artifact/video_1280.mp4/binary?client=acb7ab48-9de5-4698-bc3e-5e7ecb6bc0a7&collection=contentId-455508047&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhY2I3YWI0OC05ZGU1LTQ2OTgtYmMzZS01ZTdlY2I2YmMwYTciLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC00NTU1MDgwNDciOlsicmVhZCJdfSwiZXhwIjoxNjQ3NDM0MDQ5LCJuYmYiOjE2NDc0MzExMDl9.EbohtJ4cAJo74H8bk6kEpWW6xU8FU3fGepiKf829csY>" %}
Tree 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': 35,
    'children': [
        {
            'name': 'Child A',
            'value': 9,
            'children': [
                {'name': 'Child A1', 'value': 23},
                {'name': 'Child A2', 'value': 72},
                {'name': 'Child A3', 'value': 93},
            ],
        },
        {
            'name': 'Child B',
            'value': 56,
            'children': [
                {'name': 'Child B1', 'value': 39},
                {'name': 'Child B2', 'value': 61},
                {'name': 'Child B3', 'value': 71},
            ],
        },
        {
            'name': 'Child C',
            'value': 100,
            'children': [
                {'name': 'Child C1', 'value': 19},
                {'name': 'Child C2', 'value': 66},
                {'name': 'Child C3', 'value': 47},
            ],
        },
    ],
}]

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

![The tree chart is in the default configuration.](/files/8KczyLjrqNh2xKAQFqE5)

### 2. Customization And Context

```python
data = [{
    'name': 'Central Plant',
    'value': 300,
    'children': [
         {
            'name': 'Mach A',
            'value': 100,
            'children': [
                 {'name': 'Working', 'value': 95},
                 {'name': 'Maintenance', 'value': 5},
            ],
        },
        {
            'name': 'Mach B',
            'value': 150,
            'children': [
                 {'name': 'Working', 'value': 135},
                 {'name': 'Maintenance', 'value': 15},
            ],
        },
        {
            'name': 'Mach C',
            'value': 50,
            'children': [
                {'name': 'Working', 'value': 40},
                {'name': 'Maintenance', 'value': 10},
            ],
        },
    ],
}]

s.plt.tree(
    data=data, order=0,
    title='Status of Machines at Central Plant',
    rows_size=2, cols_size=10, padding='0,0,0,2',
)
```

![The tree chart fully customized, note the space before the component using padding='0,0,0,2', and cols\_size=10.](/files/t824krbOFzBTUGiWa8BE)

{% 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/tree.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.