Black Lives Matter. Please consider donating to Black Girls Code today.

Horizontal bar chart + scatter: force labels to stick yaxis

jsfiddle source code


Sometimes with horizontal bar chart + scatter, the distance of labels from vertical yaxis is changing: It appears when one of the scatter value is zero.

Is there a way to force labels to stick yaxis even if value is zero ? I tried with suffix, prefix, padding, …


That has nothing to do with the labels. Your problem has to do with the auto x-axis range values plotly computes. In your bottom graph the scatter trace comes near zero and — by default — gets a bit of padding along the x-direction.

To undo that padding, simply set layout.xaxis.range = [0, 30]

1 Like

Yes, it works with range = [0, 30]

But, when one scatter plot is at range 30, it is splitted in half, only left part is displayed.

I found layout.xaxis.range=[0, null] and later layout.xaxis=‘tozero’. Both are working.

I updated jsfiddle code if someone else interested in.


Well, sometimes it works, sometimes not.

Comparison of horizontal bar charts with [0,null], ‘tozero’, [0,30] xaxis.layout

Only [0,30] is working as expected but scatter point at 30 will be half displayed.

try setting cliponaxis: false in that case.