dcc.Graph - only `curveNumber` is showing up

Dash Python
1

@chriddyp,

While making the reproducible example, I realized that the elements missing the customdata are not “lines” but rather the trace itself, which is clickable when the lines form a closed component. Also, not only the customdata, but also text is missing as well. Seems that “CurveNumber” is the only attribute that shows up. Please check the code below:

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

app = dash.Dash(__name__)

somedata = ['p1', 'p2', 'p3', 'p4']

app.layout = html.Div([
    dcc.Graph(
        figure={
            'data': [go.Scatter(
                x=[1, 1, 2, 2, 1],
                y=[1, 2, 2, 1, 1],
                mode='lines',
                name='this_trace_is_a_box',
                customdata=somedata,
                text=somedata,
                fill='toself',
                line={
                    'width': 1,
                    'color': 'black',
                },
            )],
            'layout': go.Layout(
                xaxis={'range': [0, 3]},
                yaxis={'range': [0, 3]},
                hovermode='closest'
            )
        },
        id='graph'
    ),
    html.H3(id='clickdata-output')
])

@app.callback(
    Output('clickdata-output', 'children'),
    [Input('graph', 'clickData')]
)
def on_click(click_data):
    return str(click_data)

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

I guess the issue is then a little different, but it would be nice to be able to add customdata to anything you can click, such as the trace here. Is this something that’s already possible or is it not currently possible in Dash/Plotly itself?

2

Hi @marcodlk

This is probably because when fill is set 'toself', hoveron defaults to fills.

If you add hoveron='points+fills', you ought to capture pointNumber, customData, x, y, etc when clicking the points.

3

Hi @bcd, thanks for the reply!

I did not know about hoveron=‘points+fills’ but unfortunately it does not solve my problem. Ideally I wanted to be able to click on the fill and get some customdata about the polygon composed in that trace, but I see now that it is an entirely different issue outside the scope of the customdata here, which is passed to each element of the trace.

Thankfully I was able to find a workaround for my situation, but the ability to add customdata and/or text to fills would be a useful feature in plotly IMO. @chriddyp, does this sound like something worth creating an issue for?

4

Sure! Could you open in issue in plotly.js? Issues · plotly/plotly.js · GitHub. It’d be helpful for you to link the issue in this forum and link the forum in the issue :slight_smile:

5

Pass customdata to ‘fill’ or trace itself. #2504: https://github.com/plotly/plotly.js/issues/2504

6

Any progress in this?
Is there an alternative how to send additional information via hoverData?