Moving a circle shape along y axis using Plotly Dash

HI All,

I’m creating a what if tool that has a circle shape and I want to move it along y axis up or down . I read about the dracula.css on moving cards , should i implement the same concept or is there any other way to do this ?

Actual requirement has a scatter plot and to move the data points . since I was not able to edit the scatter plot data points so I created a graph with circle shape and made the graph editable. Now I want to restrict the circle moving around the graph and to move only on the y-axis.

Is there any possibility with Dash . If someone can share any example i can implement with my scenario.

Thanks,
Meeras

It sounds like you’re describing a vertical slider. Would that fit your use case?

Thanks for the reply @RenaudLN , With sliders I have tried and gave the demo but my organization is looking for moving the data points inside the scatter plot which im not able to do it . So I Created a circle shape and made the shape as editable , But it is moving all around the graph . I want only to move vertically . So even the circle moves horizontally it should be repositioned to the corresponding vertical axis.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

import plotly.graph_objects as go

import plotly.graph_objects as go # or plotly.express as px
fig = go.Figure()

Set axes properties

fig.update_xaxes(range=[0, 4.5], zeroline=False)
fig.update_yaxes(range=[0, 4.5])

Add circles

fig.add_shape(type= ‘circle’,
xref= ‘x’,
yref= ‘y’,
xsizemode= ‘pixel’,
ysizemode= ‘pixel’,
xanchor= ‘3’,
yanchor= ‘0’,
x0= 3,
x1= 25,
y0= 0,
y1= 25,
line_color=“LightSeaGreen”,

)

fig.update_layout(width=800, height=800)

fig.update_yaxes(fixedrange=False)
fig.update_xaxes(fixedrange=False)

app = dash.Dash()
app.layout = html.Div([
dcc.Graph(figure=fig,config={‘editable’: True,‘edits’: {
‘shapePosition’: True
}
})
])

if name == “main”:
app.run_server( port = 8052, debug=True)

Thanks,
Meera

To answer your question I don’t think there is a way to constrain the position of the points of a scatter plot in editable mode.

There may be some workarounds though, if you can tell us a little about your use case (i.e. what should happen when you move the circle).

Suppose I’m moving the circle along y axis from y =2 to y =4 , a call back should be triggered which will do some calculations and give the result as a bar chart. That is the requirement .

Ok then I don’t get why you can’t use a vertical slider. You could overlay the slider on top of the graph with some css if the point is that it needs too look like it’s part of the same thing.

Can you please show a small workaround example so that I can build across it . I’m not asking for full code but to understand about your point .

Something like this? image

1 Like

My question is similar to this interactive ploting . So basic idea is if the customer wants to know what will happen if there is a increase in the y axis by moving the scatter plot data points .

If not dash then if this can be achieved through some other technology like highcharts ?