Core Concepts

/

Interactions and Selections

Interactions and Selections

Interactive HTML and notebook charts support pan, zoom, hover, click, selection, brushing, crosshairs, and view changes. Interaction settings control browser behavior; callbacks decide whether a live Python process also receives an event.

Configure browser behavior

Set flags directly on a chart or compose an interaction_config() child:

Standalone HTML keeps these local browser behaviors. It cannot invoke Python because no kernel or server is attached.

Viewport DOM events are always available. Add on_view_change to a live notebook or Reflex adapter when Python needs the semantic range events; there is no separate transport configuration flag.

Handle chart events in Reflex

Core chart containers accept on_hover, on_click, on_brush, on_select, and on_view_change for live notebook widgets. In Reflex, put event handlers on the outer adapter component instead. This area chart shows a toast after a point click or completed selection:

Click a point, or Shift-drag across several points, to trigger the Reflex toasts. The module-scope inline() token keeps this fixed-data chart connected to the backend so those events can reach PythonCallbacksState.

The Reflex adapter exposes a separate event surface on the outer reflex_xy.chart(...) component:

Core notebook callbackCallback payloadReflex component propReflex payload
on_hoverResolved row dictionaryon_point_hoverPoint envelope with data and canonical row ID
on_clickResolved row dictionaryon_point_clickPoint envelope with data and canonical row ID
on_brushBounds or polygon dictionaryNo dedicated prop
on_selectxy.Selection with canonical rowson_select_endSelection envelope with count, bounds, and cleared state
on_view_changeView dictionaryon_view_changeView-change envelope

Reflex event props work with a live adapter source—an inline() token or an @reflex_xy.figure var—not with the direct static-Chart tier. See Reflex integration.

Exact readout and selection

The renderer may display a decimated line, density grid, or retained sample, but XY keeps canonical rows in Python:

Picked row
Click a point
Selected x · 0 rows
Shift-drag across points
Selected y
No active selection

Click a point to update Picked row. Shift-drag a box across points to update the selected x and y values. Both readouts are Reflex state populated by on_point_click and on_select_end.

The selection event includes canonical row IDs and a bounded rows projection, which is sufficient for this small chart. For large or truncated selections, call reflex_xy.resolve_selection(event) in the handler to recover every canonical row.

Linked views

Give related charts the same link_group and choose which axes participate:

Pan or zoom changes propagate between mounted charts in that group. Linking coordinates the view window; cross-filtering application data still belongs in a widget callback or host-framework state. For complete dashboard patterns, read Dashboards and linked views.

Built with Reflex