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

[dataturnsmeon]

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

[adamschroeder]

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

[AIMPED]

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.

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:

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

mred layout

[dataturnsmeon]

@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 but for the y-axis.

[hoatran]

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

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.

[dataturnsmeon]

@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!

[hoatran]

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

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)

[dataturnsmeon]

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

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

[hoatran]

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

[Bijoy]

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!

[dianageorgieva2]

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

[yaseen97]

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!

[CC1999]

Has any functionality for this been updated since last year?