Interaction with Scatter- or Bar-Charts

to which extend is it possible to use scatter or bar charts as input from the user.
For example I would like a user to drag the bars in a barchart to modify certain parameters, like e.g.


Another example for dragable scatter plots is

Thank you!

Anyone has an answer to this old post yet? This was three years ago and I’m still looking for a solution! Many thanks to the one who can point me in the right direction.

HI @Mianen welcome to the forums. As far as I know, there is no built in functionality for this. Do you need exactly this solution? In the end, these columns seem to be value sliders such as dcc.Slider()

I would prefer this one yes. I have seen the sliders and also an example with vertical sliders, but this is really what I need.

Hello @Mianen,

This could be possible through some JavaScript.

This JavaScript could in turn trigger a clientside_callback that updates the data upon release of the drag.

The hardest part would be determining the rate at which to increase or decrease the desired bar.

You have to keep in mind that these charts are svg so it makes editing them more tricky.

@jinnyzor so you would track the pointer movement after clickevent and simultaneously update the bar chart?

Without knowing JS, in my head these bars are disguised dcc.Slider() components :upside_down_face:

Ah, but things like logarithmic scaling wouldn’t work with a dcc.Slider. :slight_smile:

You could get a slider to work for sure.

The mouse events would cause the svg to update, then on release it would trigger the update.

Using the same mechanisms as here:

Thanks for all replies. It is possible to do in JavaScript but since this is an old question and a quite generic feature I was hoping there would be a mature working solution out there by now with “automatic” triggering and callbacks. That’s why I raised the question. For my small current project I unfortunately don’t have time to develop this myself.