Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Rotating a bar graph 180 degrees in Dash

EDIT:

This is resolved. The adjustment in the CSS worked. It took some time for the updates in the CSS file to register - which I think is a problem with codepen and not Dash.

I’m working with Dash right now, and I want to rotate a bar graph 180 degrees. There is no in-built way using plot.ly to completely invert a bar graph, so I assume it must be done using the external stylesheet.

Right now, I’m using the external stylesheet here: https://codepen.io/chriddyp/pen/bWLwgP

I’ve tried adding:

div#rotate {transform: rotate(180deg); }

To the external stylesheet and then add:

html.Div(children = “test”, id = “rotate”)

To my Dash app layout, but when I run the script, the “test” text is still normally orientated. How can I implement a 180 degree rotated bar graph to me Dash application? Is there a specific section I should add the CSS amendment to? Any help would be appreciated.

Not sure what you mean here. But maybe you’re looking for https://plot.ly/python/horizontal-bar-charts/?

Thanks for the reply - I found that in the documentation, but I’m actually trying to rotate the bar graph 180 degrees. The horizontal bar graph is equivalent to rotating 90 degrees. I want to turn my graph upside down.