Hi together!
In plotly for python (5.11.0, without Dash) I tried to animate a subplot chart with multiple bars (which represent bids on a market) the number of which changes over time. However, subsequent frames got corrupted if the number of bars (traces) in the initial plot was low. To solve this problem I had to introduce a sufficiently high number of “dummy bars” in the initial plot to cover the maximum number of traces in later frames.
For bug fixing, I extracted the figure code in detail as shown below. I am wondering whether I used the wrong plot for this task, this behavior of plotly is needed for some reasons or if is merely a bug.
The dummy bars can be found in lines 46 to 215. If they are removed, frames are displayed with only limited number of bars, once the slider is moved manually:
import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly.graph_objs.layout import Template
from numpy import array as array
fig = go.Figure({
'data': [{'hovertemplate': ('data trace 0'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x',
'y': array([0.21237785]),
'yaxis': 'y'},
{'hovertemplate': ('data trace 0'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x',
'y': array([0.28457747]),
'yaxis': 'y'},
{'hovertemplate': ('data trace 0'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x2',
'y': array([0.28457747]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace 0'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('dummy'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([-0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'}
],
'frames': [{'data': [{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x',
'y': array([0.21237785]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x',
'y': array([0.28457747]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x2',
'y': array([0.28457747]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'}],
'name': '36'},
{'data': [{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x',
'y': array([0.07505241]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x',
'y': array([0.3325078]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.50000000000006, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.3]),
'xaxis': 'x',
'y': array([0.43807988]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.4]),
'xaxis': 'x',
'y': array([0.5760755]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.5]),
'xaxis': 'x',
'y': array([0.65900578]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.6]),
'xaxis': 'x',
'y': array([0.66380373]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.7]),
'xaxis': 'x',
'y': array([0.66928365]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.8]),
'xaxis': 'x',
'y': array([0.67174158]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.9]),
'xaxis': 'x',
'y': array([0.67932771]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([1.]),
'xaxis': 'x',
'y': array([0.71959346]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x2',
'y': array([0.67174158]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x2',
'y': array([0.71959346]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.3]),
'xaxis': 'x2',
'y': array([0.77629162]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.4]),
'xaxis': 'x2',
'y': array([0.81024361]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.5]),
'xaxis': 'x2',
'y': array([0.85591214]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x3',
'y': array([0.3325078]),
'yaxis': 'y3'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x3',
'y': array([0.5760755]),
'yaxis': 'y3'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.3]),
'xaxis': 'x3',
'y': array([0.67932771]),
'yaxis': 'y3'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 318.75, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.4]),
'xaxis': 'x3',
'y': array([0.9489763]),
'yaxis': 'y3'}],
'name': '37'},
{'data': [{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x',
'y': array([0.21237785]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x',
'y': array([0.28457747]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.3]),
'xaxis': 'x',
'y': array([0.42354349]),
'yaxis': 'y'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x2',
'y': array([0.28457747]),
'yaxis': 'y2'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.1]),
'xaxis': 'x3',
'y': array([0.21237785]),
'yaxis': 'y3'},
{'hovertemplate': ('data trace'),
'marker': {'color': 'rgba(70, 127.5, 200, 1.0)'},
'offset': array([-0.1]),
'showlegend': False,
'type': 'bar',
'width': array([0.1]),
'x': array([0.2]),
'xaxis': 'x3',
'y': array([0.42354349]),
'yaxis': 'y3'}],
'name': '38'}],
'layout': {'font': {'size': 20},
'hovermode': 'closest',
'sliders': [{'active': 0,
'currentvalue': {'font': {'size': 20},
'prefix': 'Period: ',
'visible': True,
'xanchor': 'right'},
'len': 0.9,
'pad': {'b': 10, 't': 50},
'steps': [{'args': [[36], {'frame': {'duration': 300,
'redraw': False}, 'mode':
'immediate', 'transition':
{'duration': 300}},
],
'label': '36',
'method': 'animate'},
{'args': [[37], {'frame': {'duration': 300,
'redraw': False}, 'mode':
'immediate', 'transition':
{'duration': 300}},
],
'label': '37',
'method': 'animate'},
{'args': [[38], {'frame': {'duration': 300,
'redraw': False}, 'mode':
'immediate', 'transition':
{'duration': 300}},
],
'label': '38',
'method': 'animate'}],
'transition': {'duration': 500, 'easing': 'cubic-in-out'},
'x': 0.1,
'xanchor': 'left',
'y': 0,
'yanchor': 'top'}],
'updatemenus': [{'buttons': [{'args': [None, {'frame': {'duration':
500, 'redraw': False},
'fromcurrent': True,
'transition': {'duration':
500, 'easing': 'quadratic-in-out'}}],
'label': 'Play',
'method': 'animate'},
{'args': [[None], {'frame':
{'duration': 0, 'redraw':
False}, 'mode': 'immediate',
'transition': {'duration':
0}}],
'label': 'Pause',
'method': 'animate'}],
'direction': 'left',
'pad': {'r': 10, 't': 87},
'showactive': False,
'type': 'buttons',
'x': 0.1,
'xanchor': 'right',
'y': 0,
'yanchor': 'top'}],
'xaxis': {'anchor': 'y',
'domain': [0.0, 1.0],
'range': [-0.1, 1.5],
'showgrid': True,
'title': {'text': 'Amount'},
'visible': True},
'xaxis2': {'anchor': 'y2',
'domain': [0.0, 1.0],
'range': [-0.1, 1.5],
'showgrid': True,
'title': {'text': 'Amount'},
'visible': True},
'xaxis3': {'anchor': 'y3',
'domain': [0.0, 1.0],
'range': [-0.1, 1.5],
'showgrid': True,
'title': {'text': 'Amount'},
'visible': True},
'yaxis': {'anchor': 'x',
'domain': [0.8333333333333333, 0.9999999999999999],
'range': [0.0, 1.0],
'showgrid': True,
'title': {'text': 'Bid price'},
'visible': True},
'yaxis2': {'anchor': 'x2',
'domain': [0.41666666666666663, 0.5833333333333333],
'range': [0.0, 1.0],
'showgrid': True,
'title': {'text': 'Bid price'},
'visible': True},
'yaxis3': {'anchor': 'x3',
'domain': [0.0, 0.16666666666666666],
'range': [0.0, 1.0],
'showgrid': True,
'title': {'text': 'Bid price'},
'visible': True}}
})
fig.show()