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

Multiple x axis on the bottom of chart have a gap

I’m trying to show multiple x axis on the bottom of my chart. I started to add the axis with layout.xaxis.position to show them stacked but they start getting over the chart. Then I set layout.margin.pad to 50 and I got the result I wanted for the first axis only.

Is there a way to do this for the remaining ones? Or is this a bug?

plotly-chart

Codepen here

As axis.position can’t be set to a negative value (we might allow this in v2), I think the only way to solve this is to restrain the yaxis.domain to e.g. [0.2, 1], see https://codepen.io/etpinard/pen/mKBWpB?editors=1010

I’m glad v2 will support negative positions but shouldn’t the layout.margin.pad affect all the axis?

Regarding your solution, I think setting tick properties as a workaround a better approach as someone said in here.