# Indicators with Header

This chart uses the [bento-box](https://docs.shimoku.com/dev/elements/create-your-own-charts/bento-box "mention") to join an html header component with a group of indicators.

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

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

It must contain the following input variables:

```python
order: int 
# List of groups of indicators, each one of them will be used as the input
# of an indicators function call
indicators_groups: List[Union[pd.DataFrame, List[Dict]]]
# Header configuration
title: str
```

Accepts the following input variables as optional:

```python
# The parameters that will be passed to the indicators calls
indicators_parameters: Optional[dict] = None
subtitle: str = ''
background_color: str = 'var(--color-primary)'
text_color: str = 'var(--background-paper)'
icon_url: str = 'https://uploads-ssl.webflow.com/619f9fe98661d321dc3beec7/63e3615716d4435d29e0b82c_Acurracy.svg' 
cols_size: int = 12
```

{% hint style="info" %}
Because it is using multiple indicators the function will return the next available order
{% endhint %}

## Examples

With this example it can be seen how to use the function with parameters for the indicator

```python
indicators_groups = [
    [
        {
            "description": "% of times the algorithm has predicted the relative position of NY prices with respect to HK prices correctly",
            "title": "Accuracy",
            "value": "76.67%",
            "align": "left",
            "color": "success",
            "variant": "contained"
        },
        {
            "description": "Total of successes predictions",
            "title": "True",
            "value": "154",
            "align": "left",
            "color": "success"
        },
        {
            "description": "Total of Failed predictions",
            "title": "False",
            "value": "22",
            "align": "left",
            "color": "error",
        },
        {
            "description": "Return of investment",
            "title": "ROI",
            "value": "1.5M",
            "align": "left",
            "color": "",
        },
    ]
]

s.plt.indicators_with_header(
    order=0, title='Accuracy', subtitle='Cross-listed trading suite',
    indicators_groups=indicators_groups,
    indicators_parameters=dict(
        cols_size=24,
    )
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fq0fcbFuXJMH9xQ0DyYDO%2FIndicators%20with%20Header.png?alt=media&#x26;token=2e7908b8-4a1e-45b4-a9a7-02261a9050c4" alt=""><figcaption></figcaption></figure>