Dash Plotly Area Chart - Rotate 90 deg?

Dear Dash enthusiasts,

can anybody help me with a pro tip how I can get an area chart in horizontal orientation?

I tried to rotate a line chart with „fill= tozeroy“, which works nicely in a standard vertical setting, however this looks weird in horizontal orientation. The fill area does not end on the bottom of the yaxis and is just floating around next to the main line.

Here is an example picture of a chart I would like to build, quite a simple area chart, just rotated 90 degrees to achieve horizontal orientation!

Your help would be much appreciated!! Thanks.

Hi @Quirlpool. Not sure if I understand correctly, you want to swap the x- and y- axes?

Could you provide the code for your area chart?

Hi Aimped,

thanks for your question. One might say so, yes, I would like to rotate the chart by 90 degrees, that I have my time running from bottom to top instead of from left to right. Compared to the standard area chart, in my case the area should end on the yaxis side instead of the xaxis side, whereas my area/line line moves from bottom to top instead of from left to right. Does this make sense?

This would be standard:

This is what I would like to get:

This is what I tried:

import plotly.express as px
df = px.data.gapminder()
fig = px.area(df, x=“year”, y=“pop”, orientation=„h“, color=“continent”, line_group=“country”)
fig.show()

What I would like the area to do is the area should touch the „year“ axis (y) instead of the „pop“ axis…
Hope this helps. Thanks in advance!!

Specify the side of the graph, and also specify the yx axis in reverse by making it horizontal. From the desired graph, further reverse the y-axis.

import plotly.express as px
df = px.data.gapminder()
fig = px.area(df, x="pop", y="year", color="continent", line_group="country", orientation='h')

fig.update_yaxes(autorange='reversed')
fig.show()

2 Likes