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

HTML Div over DCC's graph

Hello all,

I was trying to place a DIV container over a DCC graph and the DIV container should ideally align over the graph’s axes.

Is there a way to get the X,Y pixel coordinates of the axes, so that i can align the DIV container over the graph?
I wanted to have some buttons on my graphs so i was looking to get this working.

What i have right now,

So i’m looking to align the button container with the X and Y axes! And then place buttons inside this container

If there is an easier way to get it done then i’m all ears! :smiley:

Okay I had manually set the ‘margin-top’ and ‘margin-left’ fields but it would be great if i can get this programmatically

I believe that some folks have done this by positioning the buttons with style={'position': absolute}

Can’t that be achieved also by using click events on the graph? Like explained in https://dash.plot.ly/interactive-graphing you can use Input('graph-id', 'clickData') to get clicked point, and instead of buttons use scatter points for example, acting regarding of the clicked point, that will nicely wrap into single callback as with buttons it would be separate callback for each button I think.

1 Like