Bar Chart - Interaction

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

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.

# 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.

# 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.

# 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.

# 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.

# 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 · Dataset Mode · Stacking · Reference Lines · Pro Features

Source: /barchart-interaction