Hi all,
If there is a requirement to enable planar rotation of an element, @empet has created this amazing snippet to get a hint of how to do it. It can be found at https://plot.ly/~empet/15514 This is closest possible to the one available in this jsfiddle: https://jsfiddle.net/xpaz8etg/.
Additionally, I wanted to plot a location sensor data on to a map but orientation need to be set interactively. I have achieved such interactive rotation of html elements, including dcc.Graph component by linking CSS transform property and a slider component. Output will be similar to the following:
This is achieved by following code
.
.
.
html.Div(
className="app-plot",
id="app-plotid",
children=[
dcc.Graph(
id='live-graph',
animate=False,
config={
'autosizable':True,
'scrollZoom':True,
'displayModeBar':'hover',
}
)
],
),
dcc.Slider(
id='rotate-slider',
min=-180,
max=180,
step=2,
value=0
),
.
.
.
@app.callback(Output('app-plotid', 'style'),
[Input('rotate-slider', 'value')])
def update_style(value):
return {'transform': 'rotate({}deg)'.format(value)}
Hope this helps. If there is a better way to achieve the above, kindly post it to this thread.
Regards,
Rahul