# Animating Bar chart one after the other

**URL:** <https://community.plotly.com/t/animating-bar-chart-one-after-the-other/63624>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [May 2, 2022, 11:48am UTC](https://community.plotly.com/t/animating-bar-chart-one-after-the-other/63624 "2022-05-02T11:48:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![geosphere](https://avatars.discourse-cdn.com/v4/letter/g/53a042/32.png) [@geosphere](https://community.plotly.com/u/geosphere)\
**Post date:** [May 2, 2022, 11:48am UTC](https://community.plotly.com/t/animating-bar-chart-one-after-the-other/63624/1 "2022-05-02T11:48:39Z")

</div>

Is it possible to animate a Bar chart so that each bar appears in the animation sequentially?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/7/d77997d50c04e1ec014f697f85ff3b9301c0434c.png)

For example, in the image above, I want for each frame, a new bar to show up but I don’t want the previously rendered ones to disappear thus if I’m at frame 5 then I’d like to show all the bars until that frame.

```auto
requests_df = pd.DataFrame({'requests': total_requests})

fig = go.Figure(data = [go.Bar(x=requests_df.index.tolist(), y=requests_df['requests'])],
               frames=[
                    go.Frame(data=[go.Bar(x=requests_df.index.tolist(), y=requests_df['requests'])])] 
     )
 fig.show()

```

`total_requests` is a variable with values ranging from tens to hundreds of millions and I used that to create a dataframe since I was trying to make it more convenient in a way to use. Basically, the dataframe looks like this

| | requests |
| --- | --- |
| 0 | 214388438.0 |
| 1 | 194980303.0 |
| 2 | 179475934.0 |
| 3 | 165196540.0 |
| 4 | 154815540.0 |
| 5 | 123650671.0 |

…

At first, I tried to accomplish this using `express` but my attempts did not work out so I started experimenting with `go.Figure` objects.

---

<div class="post-metadata">

**Author:** ![geosphere](https://avatars.discourse-cdn.com/v4/letter/g/53a042/32.png) [@geosphere](https://community.plotly.com/u/geosphere)\
**Post date:** [May 5, 2022, 12:14pm UTC](https://community.plotly.com/t/animating-bar-chart-one-after-the-other/63624/3 "2022-05-05T12:14:34Z")

</div>

I adjusted the dataframe in such a way that it looks like this:

| | frame | requests |
| --- | --- | --- |
| 0 | 0 | 214388438.0 |
| 1 | 0 | 0.0 |
| 2 | 0 | 0.0 |
| 3 | 0 | 0.0 |
| 4 | 0 | 0.0 |
| … | … | … |
| 2299 | 47 | 363956605.0 |
| 2300 | 47 | 334134793.0 |
| 2301 | 47 | 303192352.0 |
| 2302 | 47 | 268989809.0 |
| 2303 | 47 | 241935256.0 |

Using the code below I managed to generate the sort of animation that I wanted but it’s not working as expected as the bars are not in sync. While I tried to adjust the transition duration, it doesn’t fix the problem.

```auto
fig = px.bar(df2, y="requests", animation_frame="frame")
fig.update_layout(transition = {'duration': 3000})
fig.show()

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/5/55abd111e9aa7b9d6f5c06752fbe8e1dac3c8017.png)