Hi everyone.
I’m trying to use dash callbacks for some interactions in my application and I need to react when a user clicks on an axis value. For example, in the image below, if the user clicks on the X axis (values 1, 2 or 3) I would update the graph to show only data for the selected axis (only the two center bars in the user clicks on the value 2, for example).
The logic for updating the plot and removing the filtered data is ok. But I cannot seem to find a way to detect that a given axis value was clicked (but I can the detect if one of the bars was). Is this possible to do with Dash/Plotly?
Thank you,
Diego
Hello @dbarboza,
I believe you are hunting for something along these lines:
You can use a callback with the selectedData as an input.
Thank jinnyzon. It is something like this, but I want to be able to click on the axis values. I’m not able to click them on this sample.
@dbarboza,
This will allow you to get the selected data if selected from the chart:
app.clientside_callback(
"""function (select, id) {
if (select) {
console.log(select)
}
return ''
}""", Output('TrendChart_holder', 'children'),
Input('TrendChart', 'selectedData'),
State('TrendChart', 'id'),
prevent_initial_call=True
)
Where TrendChart is the id of the dcc.Graph. And TrendChart_holder is just html.Div that is invisible.
The xtick value does not have a click associated with it unfortunately.
Yeah, I wanted the tick value. But thank you. I’ll try to use that as a workaround.
