# 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.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FGzLkXmpbXMbZzqHzHp1n%2FTree\(1\).png?alt=media\&token=200d2e70-9498-4abc-ac77-225f6bca1405)

### 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.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FX3w6qcZtYa8sUTzJbCb0%2FTree%20Configured.png?alt=media\&token=31404c89-e61c-4dd7-91d1-151d41ce6c43)

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu_path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

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