# Is it possible to add vertical scroll bar to a horizontal bar chart?

**URL:** <https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [March 6, 2023, 11:00am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278 "2023-03-06T11:00:28Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [March 6, 2023, 11:00am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/1 "2023-03-06T11:00:28Z")

</div>

Hi,  
I have a horizontal bar chart that contains around 100 bars. With these many bars, the bars appear very thin. Is it possible to display a max of 10 bars and have a scroll bar to view the others.  
Like this - [Scrollbars for any axis – Highcharts](https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/3/434faf30658fba819b2ad09a7d71bdf8190186a2.png)

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [March 6, 2023, 4:05pm UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/2 "2023-03-06T16:05:37Z")

</div>

hi @dataturnsmeon  
Unfortunately, this is not possible out of the box with Plotly. Perhaps with some CSS you can insert the scroll bar.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 6, 2023, 8:02pm UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/3 "2023-03-06T20:02:14Z")

</div>

Hi @dataturnsmeon, here the possible solution as @adamschroeder mentioned. I defined a width of 80% and a height of 400px for the div in the css file `01_custom.css`, but you can adapt this to your needs. An issue could be that you can’t see the x- axis as it is at the bottom of the graph. In the end, you are just scrolling down a huge image ;). Looking at it now, it’s only a first step towards the chart you linked to.

```python
import dash
import plotly.graph_objects as go
from dash import html, dcc
import numpy as np

# create data, lots of bars
data = np.arange(200)

# app and layout
app = dash.Dash( __name__ )
app.layout = html.Div(
    [
        html.Div(
            dcc.Graph(
                figure=go.Figure(
                    data=go.Bar(
                        y=data,
                        orientation='h'
                    ),
                    layout={'height': 10000}
                    # ^^ adapt the height to your needs so that the bars
                    # show the desired thickness
                )
            ),
            className='scroll'
            # ^^ custom css in the assets folder
        )
    ],
)

if __name__ == ' __main__':
    app.run(debug=True)

```

01\_custom.css:

```css
.scroll
{
width:80%;
height:400px;
overflow:scroll;
float: left;
}

```

mred layout

---

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [March 13, 2023, 9:55am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/4 "2023-03-13T09:55:53Z")

</div>

@AIMPED this is cool but it cut’s off the x-axis from the view unless we scroll to the very bottom. I was hoping for something similar to [Range slider and selector in Python](https://plotly.com/python/range-slider/) but for the y-axis.

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 13, 2023, 10:38am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/5 "2023-03-13T10:38:32Z")

</div>

Based on AIMPED’s answer, I added style to `html.Div` as `style={'overflow-y':'auto', 'height':500}`. (Don’t need CSS)  
Full code:

```auto
import dash
import plotly.graph_objects as go
from dash import html, dcc
import numpy as np

# create data, lots of bars
data = np.arange(200)

# app and layout
app = dash.Dash( __name__ )
app.layout = html.Div(
    [
        html.Div(
            dcc.Graph(
                figure=go.Figure(
                    data=go.Bar(
                        y=data,
                        orientation='h'
                    ),
                    layout={'height': 5000}
                    # ^^ adapt the height to your needs so that the bars
                    # show the desired thickness
                )
            )
            # ^^ custom css in the assets folder
        )
    ],style={'overflow-y':'auto', 'height':500}
)

if __name__ == ' __main__':
    app.run(debug=False)

```

Please check does it match your requirement.

 ![Screenshot 2023-03-13 173752](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/e/3e291df5237b66af0a1a3cf30dce63edf169b8fe.png)

---

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [March 13, 2023, 10:50am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/6 "2023-03-13T10:50:44Z")

</div>

@hoatran this is great but again I want the x-axis to be always visible to the user, with this approach the user have to scroll down to see the x-axis values.

Thank you!

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 13, 2023, 11:18am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/7 "2023-03-13T11:18:45Z")

</div>

Not sure does it be accepted or not but I’m thinking about add one more Graph then style it. Something as below:

```auto
import dash
import plotly.graph_objects as go
from dash import html, dcc
import numpy as np

df = px.data.gapminder().query("continent == 'Europe' and year == 2007 and pop > 2.e6")
fig = px.bar(df, x='pop', y='country', text_auto='.2s',orientation='h', height=2000)
fig.update_traces(width=1)
fig.update_xaxes(range=[0, 90000000],title=None)

df2=df[df['country']=='Bosnia and Herzegovina']
fig2 = px.bar(df2,x='pop',y='country',orientation='h', height=35, text_auto='.2s')
fig2.update_layout(yaxis = dict(color = 'white'))
fig2.update_xaxes(range=[0, 90000000])
fig2.update_yaxes(title=None)

# app and layout
app = dash.Dash( __name__ )
app.layout = html.Div([
    html.Div([
    dcc.Graph(
        figure=fig),
],style={'overflow-y':'auto', 'height':500}),
dcc.Graph(
        figure=fig2),
])
if __name__ == ' __main__':
    app.run(debug=False)

```

 ![Screenshot 2023-03-13 181832](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/3/536ed3953a4cb9a9bd92a3d5601dd84bf0e95755.png)

---

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [March 13, 2023, 12:56pm UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/8 "2023-03-13T12:56:10Z")

</div>

Thanks @hoatran , I appreciate the efforts to post this!

This could be a workaround but def not an optimal solution.

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 13, 2023, 1:00pm UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/9 "2023-03-13T13:00:16Z")

</div>

Yep, I know, hope that you could find better solution.

---

<div class="post-metadata">

**Author:** ![Bijoy](https://avatars.discourse-cdn.com/v4/letter/b/e5b9ba/32.png) [@Bijoy](https://community.plotly.com/u/Bijoy)\
**Post date:** [May 16, 2023, 8:51am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/10 "2023-05-16T08:51:25Z")

</div>

If Tableau charts can have a vertical scroll bar on the chart itself without elongating the height of the chart and obscuring the horizontal axis. there ought to be way to accomplish the same in Dash Plotly.

I wonder why this option was not there in dcc or html components. Can community members chime in with an optimal solution.

Thank you!

---

<div class="post-metadata">

**Author:** ![dianageorgieva2](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@dianageorgieva2](https://community.plotly.com/u/dianageorgieva2)\
**Post date:** [August 17, 2023, 11:57am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/11 "2023-08-17T11:57:15Z")

</div>

I’m interested in the topic as well. Especially on a scrollbar in plotly+streamlit. I hope activity on the topic attracts some attention.

Thanks in advance 🙂

---

<div class="post-metadata">

**Author:** ![yaseen97](https://avatars.discourse-cdn.com/v4/letter/y/4bbf92/32.png) [@yaseen97](https://community.plotly.com/u/yaseen97)\
**Post date:** [August 18, 2023, 10:14am UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/12 "2023-08-18T10:14:06Z")

</div>

I’ve been closely following this thread and I want to emphasize how crucial the ability to add a vertical scrollbar to a horizontal bar chart is, especially for those who are dealing with large datasets. This functionality not only enhances user experience but also allows for a more dynamic and engaging way to present data.

The workarounds provided here are innovative and appreciated, but they might not provide the most optimal solution. Integrating this feature directly into Dash Plotly would be more efficient and beneficial for a wider user base.

I kindly urge the developers and community members to consider incorporating this feature into future updates. Such an addition would surely add value to the platform and fortify its position as a leading data visualization tool.

Thank you all for your efforts and discussions on this matter. Looking forward to seeing positive developments on this front!

---

<div class="post-metadata">

**Author:** ![CC1999](https://avatars.discourse-cdn.com/v4/letter/c/4bbf92/32.png) [@CC1999](https://community.plotly.com/u/CC1999)\
**Post date:** [October 8, 2024, 3:29pm UTC](https://community.plotly.com/t/is-it-possible-to-add-vertical-scroll-bar-to-a-horizontal-bar-chart/73278/13 "2024-10-08T15:29:10Z")

</div>

Has any functionality for this been updated since last year?