Hi there,
Is it possible with Plotly to have traces animations/smooth transitions when clicking in the legend or when adding data to the figure, like the last Chart.js library or PyEcharts do?
Example: https://www.chartjs.org/samples/latest/charts/bar/vertical.html
Thanks
Not at this time, no.
Depending on your expectations on such an interactive plot,
you can partially imitate the example at the link you posted, as follows:
import plotly.graph_objects as go
import numpy as np
month = ['January','February','March', 'April', 'May']
#initial data for bars corresponding to positive, respectively negative values:
yp = [30, 40, 68, 72, 55]
ym = np.array([50, 60, 37, 40, 45])
#new data to be added as new Bar traces to the original ones
ynp = [32, 26, 31, 40, 27]
ynm = np.array([33, 21, 36, 30, 25])
fig = go.Figure()
fig.add_bar(x=month, y=yp,
base=0,
marker_color='green',
name='positive'
)
fig.add_bar(x=month, y=ym,
base=-ym,
marker_color='crimson',
name='negative')
fig.add_bar(x=month, y =ynp, base=0, #initially this bar chart is invisible;
#it will be turned into a visible one when the corresponding button is clicked
marker_color='orange',
name='new trace+',
visible=False)
fig.add_bar(x=month, y =ynm, #initially this bar chart is invisible
base=-ynm, marker_color='brown',
name='new trace-', visible=False)
# data of negative val, corresponding to a new month, to be added to the original data
ym_add= np.concatenate((ym, [32]))
button_add = dict(method="restyle",
args = [{'x' : [month+['June'], month+['June']],
'y' : [yp+ [54], ym_add],
'base' : [[0], -ym_add]}, [0,1]],
label = 'Add data'
)
button_remv = dict(method="restyle",
args = [{'x' : [month, month],
'y' : [yp, ym],
'base' : [[0], -ym]}, [0,1]],
label= 'Remove data'
)
button_add_trace = dict(method="restyle",
args = [{'x' : [month]*4,
'y' : [yp, ym, ynp, ynm],
'visible' : [True]*4,
'base' : [[0], -ym, [0], -ynm]}, [0, 1, 2, 3]],
label = 'Add Bar trace'
)
button_remv_trace = dict(method="restyle",
args = [{'visible' : [True]*2 +[False]*2,
}, [0,1, 2, 3]],
label = 'Remove Bar trace'
)
fig.update_layout(height=500,width=700,
#showlegend=False,
updatemenus=[dict(
active=0,
direction='right',
x= 0, y=-0.12,
xanchor='left',
yanchor='top',
buttons=[button_add, button_remv]),
dict(
active=0,
direction='right',
x= 0.5, y=-0.12,
xanchor='left',
yanchor='top',
buttons=[button_add_trace, button_remv_trace])
])
This implementation displays the right data only when clicking succesivelly the two buttons displayed
by the first dropdown (in fact dropright) menu, respectively the second one.
It doesn’t perform the expected update when you are clicking first the button Add data, and immediately the button Add trace,
because Add data adds data for a new month (June), while Add trace adds a new trace to the initial traces with
data corresponding to January-May, but not to June, too.
These limitations are due to the fact that data for each button arg are provided by plotly.py, and plotly.js performs
the corresponding updates. There is no reverse communication, i.e plotly.js doesn’t send any “signal” back to plotly.py,
such that plotly.py can generate and to send new data.
Following the above example you can add more buttons corresponding to desired updates.
To understand how are defined the button args, you can read this tutorial https://chart-studio.plotly.com/~empet/15607 and references therein, on restyle, relayout and update method.