Fix graph customdata for pointnumbers

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

@@ -83,13 +83,18 @@ const filterEventData = (gd, eventData, event) => {
 
             if (
                 has('curveNumber', fullPoint) &&
-                has('pointNumber', fullPoint) &&
                 has('customdata', data[pointData.curveNumber])
             ) {
-                pointData.customdata =
-                    data[pointData.curveNumber].customdata[
-                        fullPoint.pointNumber
-                    ];
+                if (has('pointNumber', fullPoint)) {
+                    pointData.customdata =
+                        data[pointData.curveNumber].customdata[
+                            fullPoint.pointNumber
+                        ];
+                } else if (has('pointNumbers', fullPoint)) {
+                    pointData.customdata = fullPoint.pointNumbers.map(point => {
+                        return data[pointData.curveNumber].customdata[point];
+                    });
+                }
             }
 
             // specific to histogram. see https://github.com/plotly/plotly.js/pull/2113/

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

@@ -1,9 +1,11 @@
+import json
 import pytest
 import pandas as pd
 from multiprocessing import Value, Lock
 import numpy as np
 from time import sleep
-
+import plotly.express as px
+import plotly.graph_objects as go
 from dash import Dash, Input, Output, dcc, html
 
 import dash.testing.wait as wait
@@ -162,3 +164,42 @@ def update_graph(n_clicks):
     dash_dcc.wait_for_element("#my-graph:not([data-dash-is-loading])")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grbs005_graph_customdata(dash_dcc):
+    app = Dash(__name__)
+
+    df = px.data.tips()
+    df["id"] = df.index
+
+    app.layout = html.Div(
+        [
+            dcc.Graph(
+                id="pie-chart",
+                figure=go.Figure(
+                    data=[
+                        go.Pie(
+                            labels=df["day"], ids=df["id"].map(str), customdata=df["id"]
+                        )
+                    ]
+                ),
+            ),
+            dcc.Textarea(id="text-area"),
+        ]
+    )
+
+    @app.callback(Output("text-area", "value"), Input("pie-chart", "clickData"))
+    def handleClick(clickData):
+        return json.dumps(clickData)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#pie-chart")
+
+    dash_dcc.find_elements("g .slice")[0].click()
+
+    data = dash_dcc.wait_for_element("#text-area").get_attribute("value")
+    assert data != "", "graph clickData must contain data"
+
+    data = json.loads(data)
+    assert "customdata" in data["points"][0], "graph clickData must contain customdata"
+    assert data["points"][0]["customdata"][0] == data["points"][0]["pointNumbers"][0]