Enable callbacks for Plotly hoveranywhere and clickanywhere events

CHANGELOG.md

@@ -16,6 +16,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 - [#3796](https://github.com/plotly/dash/pull/3796) MCP: Add `configure_mcp_server()` to toggle which content the MCP server exposes (`include_layout`, `include_callbacks`, `include_clientside_callbacks`, `include_pages`, `expose_callback_docstrings`). Only the parameters explicitly passed are updated; omitted parameters retain their current value.
+- [#3852](https://github.com/plotly/dash/pull/3852)  Added support for Plotly hoveranywhere and clickanywhere events in `dcc.Graph` by adding `xvals` and `yvals` to `hoverData` and `clickData`.
 
 ## Changed
 - [#3796](https://github.com/plotly/dash/pull/3796) MCP: Remove the `mcp_expose_docstrings` `Dash()` constructor argument; callback docstring exposure is now controlled via `configure_mcp_server(expose_callback_docstrings=...)`.

components/dash-core-components/src/fragments/Graph.react.js

@@ -119,6 +119,28 @@ const filterEventData = (gd, eventData, event) => {
             points[i] = pointData;
         }
         filteredEventData = {points};
+
+        const includeXYVals =
+            (event === 'hover' && gd._fullLayout.hoveranywhere === true) ||
+            (event === 'click' && gd._fullLayout.clickanywhere === true);
+
+        if (includeXYVals) {
+            if (has('xvals', eventData)) {
+                filteredEventData.xvals = eventData.xvals;
+            }
+
+            if (has('yvals', eventData)) {
+                filteredEventData.yvals = eventData.yvals;
+            }
+
+            if (has('xaxes', eventData)) {
+                filteredEventData.xaxes_id = eventData.xaxes[0]._id;
+            }
+
+            if (has('yaxes', eventData)) {
+                filteredEventData.yaxes_id = eventData.yaxes[0]._id;
+            }
+        }
     } else if (event === 'relayout' || event === 'restyle') {
         /*
          * relayout shouldn't include any big objects

components/dash-core-components/tests/integration/graph/test_graph_basics.py

@@ -547,3 +547,52 @@ def show_figure_state(figure):
     dash_dcc.wait_for_text_to_equal("#output", "color=green, title=Updated Title 3")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grbs011_clickanywhere_hoveranywhere(dash_dcc):
+    """When clickanywhere and hoveranywhere are enabled, clickData and hoverData include xvals and yvals"""
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Graph(
+                id="graph",
+                figure=go.Figure(
+                    layout=go.Layout(hoveranywhere=True, clickanywhere=True)
+                ),
+                style={"width": 600, "height": 400},
+            ),
+            html.Div(id="output", children="[]"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("graph", "clickData"),
+        Input("graph", "hoverData"),
+        prevent_initial_call=True,
+    )
+    def on_event(click_data, hover_data):
+        result = {
+            "click_x": (click_data or {}).get("xvals", [None])[0],
+            "click_y": (click_data or {}).get("yvals", [None])[0],
+            "hover_x": (hover_data or {}).get("xvals", [None])[0],
+            "hover_y": (hover_data or {}).get("yvals", [None])[0],
+        }
+        return json.dumps(result)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#graph .main-svg")
+
+    graph = dash_dcc.find_element("#graph .nsewdrag")
+    graph.click()
+
+    dash_dcc.wait_for_contains_text("#output", "{")
+
+    out = json.loads(dash_dcc.find_element("#output").text)
+
+    # click anywhere should produce coordinates
+    assert out["click_x"] is not None
+    assert out["click_y"] is not None
+    assert out["hover_x"] is not None
+    assert out["hover_y"] is not None