# Add scrolling options to plots

**URL:** <https://community.plotly.com/t/add-scrolling-options-to-plots/9493>\
**Category:** Dash Python\
**Created:** [April 6, 2018, 6:48pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493 "2018-04-06T18:48:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimris22](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@jimris22](https://community.plotly.com/u/jimris22)\
**Post date:** [April 6, 2018, 6:48pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/1 "2018-04-06T18:48:03Z")

</div>

Hi I am relatively new to dash and have been trying to recreate a dashboard I made in tableau using Dash.I am trying to create the following image:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/84691ad907ef5d9b5642c494f31fff968529d16c.png)

my questions are the following:

1. How can I add vertical scroll to my bar graph?
2. How can I make that particular graph in general. I tried using going the subplot route but I cant seem to get the image to populate on my dashboard. I used the following link to create a sub plot version of the graph. Link: [https://plot.ly/python/subplots/](https://plot.ly/python/subplots/)

I have tried using the following to make the image populate on my dashboard:  
@app.callback(Output(‘monthly\_mins\_model’, ‘figure’),  
[Input(‘model\_filter’, ‘value’),  
Input(‘Site\_Filter’, ‘value’),  
Input(‘Machine\_Number\_Filter’, ‘value’),  
Input(‘Utilization\_Filter’, ‘value’),  
Input(‘Country\_Filter’, ‘value’)  
])  
def update\_monthly\_mins\_model\_graph(model,site,machine,utilization,country):  
temp = filter\_raw\_dataframe(raw\_data, model,site,machine,utilization,country)  
temp = temp.groupby([‘Year’,‘Month’,‘machine\_name\_matched’]).mean()[‘mins’]  
temp = temp.reset\_index()  
temp = temp.sort\_values([‘Year’, ‘Month’], ascending=[True, True])  
temp[‘Month\_Year’] = temp.Month.astype(‘str’) + ‘/’ + temp.Year.astype(‘str’)

```
fig = tools.make_subplots(rows=len(temp.machine_name_matched.unique()), cols=1)
for i in temp.machine_name_matched.unique():
    i = 0
    fig.append(go.Bar(
                x=temp[temp.machine_name_matched==i].Month_Year,
                y=temp[temp.machine_name_matched==i].mins,
                showlegend=True,
                orientation = 'v'
            ),i+1,1)
    i +=1

fig['layout'].update(title='Stacked subplots')

```

return py.iplot(fig, filename=‘stacked-subplots’) # I have also tried to return just the fig

Any help with this will be much appreciated.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 7, 2018, 6:08pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/2 "2018-04-07T18:08:39Z")

</div>

> [@jimris22](#):
>
> return py.iplot(fig, filename=‘stacked-subplots’) # I have also tried to return just the fig

You’ll want to just return the `fig` - The `figure` property of your `dcc.Graph` takes a “`fig`” (the conventional variable name that you see in the plot.ly/python docs)

> [@jimris22](#):
>
> How can I add vertical scroll to my bar graph?

The best thing that you can do right now is constrain the height of the `dcc.Graph` container and overflow `scroll` - note that the x-axis labels won’t be visible until you scroll to the bottom:

```auto
html.Div(dcc.Graph(...), style={'overflowY': 'scroll', 'height': 500})

```

> [@jimris22](#):
>
> How can I make that particular graph in general.

Subplots is a good way to go. If your data is formatted in a certain way, you could also try out the `create_facet_grid` “figure factory” which will generate the subplots for you: [Facet and trellis plots in Python](https://plot.ly/python/facet-plots/)

Good luck!

---

<div class="post-metadata">

**Author:** ![jimris22](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@jimris22](https://community.plotly.com/u/jimris22)\
**Post date:** [April 9, 2018, 7:36pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/3 "2018-04-09T19:36:48Z")

</div>

> [@chriddyp](#):
>
> plot.ly/python docs

Thanks Chriddup. The create\_facet\_grid function was exactly what I was looking for. Now I have the image made the way I want and now my challenge is controlling the width of those graphs. I can manually change the width to match the size of the screen but when I scale to a smaller screen the images dont resize (Only the gird type graphs). I can manually change the width to match my container of five columns which ended up being 904.105px.

So is there a way to say that we want the grid graph to take up 100% of the width of the container it is in. I have attached an image of the image as of now. Again any help with be highly appreciated.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f442da5d3b54d6bff4693bb4f7e16c96b71b5fc1.png)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 10, 2018, 3:50am UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/4 "2018-04-10T03:50:16Z")

</div>

> [@jimris22](#):
>
> So is there a way to say that we want the grid graph to take up 100% of the width of the container it is in.

Yeah, if `layout.autosize=True`, then it should expand to the container that it is in. I believe that is the default, but I’m not sure.

---

<div class="post-metadata">

**Author:** ![wsmam007](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@wsmam007](https://community.plotly.com/u/wsmam007)\
**Post date:** [July 13, 2018, 8:47am UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/5 "2018-07-13T08:47:51Z")

</div>

Hi, I am facing a similar issue with the x-axis and tried to apply `style={'overflowX': 'scroll', 'width': '1080'}`. I got the following results:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/300ccf444b2bd9b1610c298ceaabc9d5178c0a9e.png)

As you can see, the scrollbar is now present but am unable to scroll through the data. Just wanted to know if there is a way to auto increase the space between my plots and scroll through them? Thank you.

---

<div class="post-metadata">

**Author:** ![wsmam007](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@wsmam007](https://community.plotly.com/u/wsmam007)\
**Post date:** [July 18, 2018, 3:38am UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/6 "2018-07-18T03:38:53Z")

</div>

Hi, just wanted to update. I’m using `autoscale:False` as an alternative.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 18, 2018, 11:47am UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/7 "2018-07-18T11:47:52Z")

</div>

> [@wsmam007](#):
>
> As you can see, the scrollbar is now present but am unable to scroll through the data.

if you want to have a horizontal scroll bar in the graph container, you can make the figure.layout.width really large (like 5000) and then set the width of the container to be smaller than that and have a scroll bar (dcc.Graph(style={width: 600, overflowY: scroll}, …)

---

<div class="post-metadata">

**Author:** ![RylanSchaeffer](https://avatars.discourse-cdn.com/v4/letter/r/6f9a4e/32.png) [@RylanSchaeffer](https://community.plotly.com/u/RylanSchaeffer)\
**Post date:** [January 5, 2020, 7:00pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/8 "2020-01-05T19:00:58Z")

</div>

Is there a way to add scrolling options to plots in pure plotly? Or do I need to add Dash?

---

<div class="post-metadata">

**Author:** ![bridgeland](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bridgeland/32/3696_2.png) [@bridgeland](https://community.plotly.com/u/bridgeland)\
**Post date:** [November 2, 2022, 12:34pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/9 "2022-11-02T12:34:05Z")

</div>

This is a very old thread—jazz trumpet great Roy Hargrove was still alive and performing back then!

Now 4 years later, is there a way to add vertical scrollbars to a bar chart, in a way that keeps the x-axis labels visible?

---

<div class="post-metadata">

**Author:** ![swaraj\_arigela](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/swaraj_arigela/32/31690_2.png) [@swaraj\_arigela](https://community.plotly.com/u/swaraj_arigela)\
**Post date:** [May 29, 2025, 12:57pm UTC](https://community.plotly.com/t/add-scrolling-options-to-plots/9493/10 "2025-05-29T12:57:37Z")

</div>

Anybody got this vertical scrolling inside the plot with fixed x-axis. Please help me with this.