# Bar Chart - Interaction

> BarChart interaction in Dash: bar and axis click callbacks, series highlighting, axis highlight modes, and axis vs item tooltip triggers.

**Site index:** [https://muicharts.2plot.dev/llms.txt](https://muicharts.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://muicharts.2plot.dev/sitemap.xml  


---



### Overview

Interaction flows back to Dash through two callback outputs: `clickData`
(the clicked bar's `seriesId` and `dataIndex`) and `axisClickData` (the
axis value plus every series' value at the clicked position).
`highlightedItem` reports hover state, and `highlightScope` per series
controls what highlights and what fades.

---

### Click events

Click any bar to capture `seriesId` and `dataIndex`.



```python
# File: docs/barchart_interaction/click_example.py

import json

from dash import Input, Output, callback, html

from dash_mui_charts import BarChart
from docs.barchart_interaction._data import PRE_STYLE, expenses, months, revenue

component = html.Div(
    [
        BarChart(
            id='bar-int-click',
            series=[
                {'data': revenue, 'label': 'Revenue', 'color': '#1976d2'},
                {'data': expenses, 'label': 'Expenses', 'color': '#f57c00'},
            ],
            xAxis=[{'data': months, 'scaleType': 'band'}],
            grid={'horizontal': True},
            height=300,
        ),
        html.P("clickData:", style={'fontSize': '12px',
                                    'color': 'var(--mantine-color-dimmed)',
                                    'marginTop': '12px',
                                    'marginBottom': '4px'}),
        html.Pre(id='bar-int-click-out', children='Click a bar...',
                 style=PRE_STYLE),
    ]
)


@callback(
    Output('bar-int-click-out', 'children'),
    Input('bar-int-click', 'clickData'),
    prevent_initial_call=True,
)
def show_click(data):
    if not data:
        return 'Click a bar...'
    return json.dumps(data, indent=2)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Axis click

Click on the chart area to capture the axis value and all series values
at that point.



```python
# File: docs/barchart_interaction/axis_click_example.py

import json

from dash import Input, Output, callback, html

from dash_mui_charts import BarChart
from docs.barchart_interaction._data import PRE_STYLE, expenses, months, revenue

component = html.Div(
    [
        BarChart(
            id='bar-int-axis-click',
            series=[
                {'data': revenue, 'label': 'Revenue', 'color': '#1976d2'},
                {'data': expenses, 'label': 'Expenses', 'color': '#f57c00'},
            ],
            xAxis=[{'data': months, 'scaleType': 'band'}],
            grid={'horizontal': True},
            height=300,
        ),
        html.P("axisClickData:", style={'fontSize': '12px',
                                        'color': 'var(--mantine-color-dimmed)',
                                        'marginTop': '12px',
                                        'marginBottom': '4px'}),
        html.Pre(id='bar-int-axis-click-out', children='Click on the chart...',
                 style=PRE_STYLE),
    ]
)


@callback(
    Output('bar-int-axis-click-out', 'children'),
    Input('bar-int-axis-click', 'axisClickData'),
    prevent_initial_call=True,
)
def show_axis_click(data):
    if not data:
        return 'Click on the chart...'
    return json.dumps(data, indent=2)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Series highlighting

Hover over a bar to highlight the entire series and fade others.



```python
# File: docs/barchart_interaction/highlight_example.py

import json

from dash import Input, Output, callback, html

from dash_mui_charts import BarChart
from docs.barchart_interaction._data import PRE_STYLE

component = html.Div(
    [
        BarChart(
            id='bar-int-highlight',
            series=[
                {'data': [4, 3, 5, 7, 6], 'label': 'Alpha',
                 'highlightScope': {'highlight': 'series', 'fade': 'global'},
                 'color': '#5c6bc0'},
                {'data': [2, 5, 6, 3, 4], 'label': 'Beta',
                 'highlightScope': {'highlight': 'series', 'fade': 'global'},
                 'color': '#26a69a'},
                {'data': [3, 4, 2, 5, 3], 'label': 'Gamma',
                 'highlightScope': {'highlight': 'series', 'fade': 'global'},
                 'color': '#ef5350'},
            ],
            xAxis=[{'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    'scaleType': 'band'}],
            grid={'horizontal': True},
            height=300,
        ),
        html.P("highlightedItem:", style={'fontSize': '12px',
                                          'color': 'var(--mantine-color-dimmed)',
                                          'marginTop': '12px',
                                          'marginBottom': '4px'}),
        html.Pre(id='bar-int-highlight-out', children='Hover over a bar...',
                 style=PRE_STYLE),
    ]
)


@callback(
    Output('bar-int-highlight-out', 'children'),
    Input('bar-int-highlight', 'highlightedItem'),
    prevent_initial_call=True,
)
def show_highlight(data):
    if not data:
        return 'Hover over a bar...'
    return json.dumps(data, indent=2)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Axis highlight: band vs line vs none

Control the hover band/line on each axis with `axisHighlight`.



```python
# File: docs/barchart_interaction/axis_highlight_example.py

from dash import html

from dash_mui_charts import BarChart
from docs.barchart_interaction._data import months, revenue


def _variant(chart_id, title, color, mode):
    return html.Div(
        [
            html.P(title, style={'fontWeight': 600, 'fontSize': '13px'}),
            BarChart(
                id=chart_id,
                series=[{'data': revenue, 'label': 'Revenue',
                         'color': color}],
                xAxis=[{'data': months, 'scaleType': 'band'}],
                axisHighlight={'x': mode, 'y': 'none'},
                height=200,
            ),
        ],
        style={'flex': 1},
    )


component = html.Div(
    [
        _variant('bar-int-ax-band', "x: 'band' (default)", '#1976d2', 'band'),
        _variant('bar-int-ax-line', "x: 'line'", '#f57c00', 'line'),
        _variant('bar-int-ax-none', "x: 'none'", '#388e3c', 'none'),
    ],
    style={'display': 'flex', 'gap': '16px'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Tooltip triggers

`'axis'` shows all series at the hover position; `'item'` shows only the
hovered bar.



```python
# File: docs/barchart_interaction/tooltip_example.py

from dash import html

from dash_mui_charts import BarChart
from docs.barchart_interaction._data import expenses, months, revenue


def _variant(chart_id, title, trigger):
    return html.Div(
        [
            html.P(title, style={'fontWeight': 600, 'fontSize': '13px'}),
            BarChart(
                id=chart_id,
                series=[
                    {'data': revenue, 'label': 'Revenue', 'color': '#1976d2'},
                    {'data': expenses, 'label': 'Expenses',
                     'color': '#f57c00'},
                ],
                xAxis=[{'data': months, 'scaleType': 'band'}],
                tooltip={'trigger': trigger},
                height=250,
            ),
        ],
        style={'flex': 1},
    )


component = html.Div(
    [
        _variant('bar-int-tt-axis', "trigger: 'axis' (default)", 'axis'),
        _variant('bar-int-tt-item', "trigger: 'item'", 'item'),
    ],
    style={'display': 'flex', 'gap': '16px'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Related pages

- [Basic](/barchart-basic) · [Dataset Mode](/barchart-dataset) · [Stacking](/barchart-stacking) · [Reference Lines](/barchart-reference) · [Pro Features](/barchart-pro)


---

*Source: /barchart-interaction*