Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Clickable scatterplot

Hi all,

How do I capture the information if the user click on a given datapoint in a scatter plot?

Specially, I am trying to catch the “text” property of that particular point.

Thank you!

See https://dash.plot.ly/interactive-graphing

But I get this error:

"output" doesn't have "clickData" as a property.

Here is a list of the available properties in "output":
['children', 'id', 'n_clicks', 'key', 'role', 'data-*', 'aria-*', 'accessKey', 'className', 'contentEditable', 'contextMenu', 'dir', 'draggable', 'hidden', 'lang', 'spellCheck', 'style', 'tabIndex', 'title', 'fireEvent']

Basically, the graph is itself an output… Based on some user input, I plot a specific graph. I then want the user to be allowed to click on points in that graph.

Is this possible?

From your error message, it looks like graph isn’t actually the specified output. I’d double check your IDs.

You are right. output is actually a .Div returned by a function with a Graph inside of it.

I did it this way because depending on user input there might be 1 or 2 scatter plots…

Do I need to change this then?

{'props': {'children': [{'props': {'id': 'graph', 'figure': {'data': [{'type': 'scatter', 'x': [-1.8933672, -4.0609117, -0.7470706, -3.4806068, -2.8717048, -3.3993382000000003, -1.6259642, -1.8813276, 1.5114362, -3.8900106, -5.570608, -3.3232646, 0.10351796, -2.0806188999999997, -6.033199, -1.7670560000000002, -0.91152203, -2.0776284, 0.34636766, -4.0827255, -3.8958303999999995, 1.7091908, -0.23818584, 2.4408090000000002, -2.6037266, -1.926063, 1.0623965, -1.9617234000000001, 0.7915464, -2.189582, -3.0916977, -6.5491657, 3.7399697, 2.6534636000000003, -2.3127966, -3.5859205999999997, 0.66403824, 2.3990270000000002, -5.3011947, -0.70591474, -0.84401476, -0.29373938, 1.9677220000000002, -1.4376870000000002, -0.9701138000000001, 3.2277665, -5.7503505, -6.7920694, -3.9885888, -5.0241504, 0.46886748, -3.1973414, -0.5242680999999999, 1.4767647, -5.5044723, 0.99022126, -4.192343], 'y': [-4.200338400000001, -5.883945, -5.561692, 0.17390442, -0.37038374, -4.903331, 0.1578116, -3.2004182, -7.224508, -3.6774976, 1.6739537, -7.5847254, -6.8439393, -3.1436113999999997, 0.01756523, -5.1476755, -0.78528637, -0.99010813, 2.9760883, 0.9647219000000001, 1.7631743000000002, -7.4862850000000005, -1.3320321000000002, 0.031946965, -4.649405000000001, -0.25322777, -2.0079474, 1.0756274, -4.836405, 2.7421777, -5.4601583, 2.0154543, -3.4283836, -4.071985, -6.433365, -2.7555006, 0.1294251, -1.7470665, -7.903554, 0.78021896, -3.294258, -2.3972967, -8.703622, -8.913864, -8.014362, -5.6601067, -6.121775599999999, -0.0063578514000000004, -4.259133, -4.780572, 1.1378171000000001, -7.2063265, -4.886744, -5.5010304, -3.166315, -2.9679062000000003, -1.8261981], 'text': ['TCGA-02-0033', 'TCGA-02-0047', 'TCGA-06-0119', 'TCGA-06-0122', 'TCGA-06-0130', 'TCGA-06-0137', 'TCGA-06-0139', 'TCGA-06-0142', 'TCGA-06-0145', 'TCGA-06-0154', 'TCGA-06-0158', 'TCGA-06-0184', 'TCGA-06-0185', 'TCGA-06-0187', 'TCGA-06-0188', 'TCGA-06-0190', 'TCGA-06-0192', 'TCGA-06-0238', 'TCGA-06-0240', 'TCGA-06-0644', 'TCGA-06-0646', 'TCGA-06-1084', 'TCGA-06-1802', 'TCGA-06-2570', 'TCGA-06-5408', 'TCGA-06-5413', 'TCGA-06-5417', 'TCGA-06-6389', 'TCGA-12-0616', 'TCGA-12-0829',

This is what is inside “output”'s children. Can I access the graph’s “clickData” somehow?

Duplicate of https://github.com/plotly/dash-core-components/issues/258