# How to access "customdata" with hover action?

**URL:** <https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324>\
**Category:** Dash Python\
**Created:** [July 24, 2019, 2:20pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324 "2019-07-24T14:20:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeff](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@Jeff](https://community.plotly.com/u/Jeff)\
**Post date:** [July 24, 2019, 2:20pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/1 "2019-07-24T14:20:19Z")

</div>

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](https://dash.plot.ly/interactive-graphing), 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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/6/60d04955658ea5458ebd581684baf6629b0fd64f.png)

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [July 24, 2019, 2:58pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/2 "2019-07-24T14:58:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Snizl](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@Snizl](https://community.plotly.com/u/Snizl)\
**Post date:** [July 24, 2019, 3:14pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/3 "2019-07-24T15:14:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeff](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@Jeff](https://community.plotly.com/u/Jeff)\
**Post date:** [July 24, 2019, 3:16pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/4 "2019-07-24T15:16:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [July 24, 2019, 3:21pm UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/5 "2019-07-24T15:21:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@Jeff](https://community.plotly.com/u/Jeff)\
**Post date:** [July 25, 2019, 4:11am UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/6 "2019-07-25T04:11:48Z")

</div>

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.

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [October 19, 2020, 11:11am UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/7 "2020-10-19T11:11:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![beatriz.saldana](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@beatriz.saldana](https://community.plotly.com/u/beatriz.saldana)\
**Post date:** [December 12, 2020, 12:12am UTC](https://community.plotly.com/t/how-to-access-customdata-with-hover-action/26324/8 "2020-12-12T00:12:33Z")

</div>

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