How to access "customdata" with hover action?

Dash Python
1

Hi, guys. I meet a problem about getting the custom data through hoverData property. First of all, I have a dcc.Graph object with multiple dcc.Mesh3d traces. Based on interactive graphing tutorial, I tried to add a specific name as customData for each traces so that I could get the trace name of the point the mouse hovering on.

However, I cannot get the customdata key in hoverData, which lists as

{‘points’: [{‘x’: 177, ‘y’: 188, ‘z’: 90, ‘curveNumber’: 7, ‘pointNumber’: 16753, ‘i’: 8490, ‘j’: 8489, ‘k’: 8195}]}

As shown in the tutorial, there should be customdata in the hoverData. I checked the document, where I found this explanation:

Note that, “scatter” traces also appends customdata items in the markers DOM elements

Does it mean only dcc.Scatter can return the customdata? Could hover text Ea in this picture be extracted? This is what I want. Any suggestion is appreciated Thanks!

image
image571×509 113 KB

2

Might need to use customdata (with no capital ‘D’) instead. See if that works.

3

How do you create your data?
I just tried the same thing today and it worked flawlessly with the tutorial (except for me getting always two hover curves)
Maybe try with the hovertext if customdata does not work.

4

Hi, @mbkupfer. Thanks for your reply. I don’t think this is the solution and the typo is revised.

5

I see. If you can post a minimal snippet to reproduce then that could be more helpful in diagnosing the issue.

1 Like
6

Hi, @mbkupfer. Testing on a minimal component really helps me. Finally I found I built two same libraries while my always import the older one. What a stupid mistake. BTW, now I make sure we can get our data from hoverData as we want. Hope the following sample example could be helpful for others. Thanks.

import dash
import json
import numpy as np
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

pts = np.loadtxt(np.DataSource().open('https://raw.githubusercontent.com/plotly/datasets/master/mesh_dataset.txt'))
x, y, z = pts.T

app.layout = html.Div([
   dcc.Graph(
        id='hover-test',
        figure = {
            'data':[
                go.Mesh3d(
                        x = x,
                        y = y,
                        z = z,
                        # text = ['a', 'b', 'c', 'd'],
                        customdata = ['aa'],
                        name = 'Trace 1',
                        # mode = 'markers',
                        # marker = {'size': 12}
                    ),
                go.Mesh3d(
                    x=x,
                    y=y,
                    z=z+10,
                    # text = ['a', 'b', 'c', 'd'],
                    customdata=['cc'] * len(z),
                    name='Trace 2',
                    # mode = 'markers',
                    # marker = {'size': 12}
                )
                ]
            }
        ),
    html.Div([
        html.Pre(
            id = 'hover-data',
        )
    ])
])

@app.callback(Output('hover-data', 'children'),
              [Input('hover-test', 'hoverData')])

def dis_play_hover_data(hover_data):
    return json.dumps(hover_data, indent=2)

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
7

sorry but I still can’t understand how did you access the custom data value. I am plotting a choropleth map and it runs fine on jupyter notebook all data is accessible for hover action but when I exported the same plot to chart studio it fails to show value for some data and instead only displays customdata. How can I access all the value for hover action?

8

I am experiencing the same problem, has anyone been able to solve it?