Make plotly always show the origin (0,0) when making the plot in Plotly.js

When I use markers in plotly js. it take some space from (0,0) points. I want to make graph always from origin(0,0).
You can find working example here to reproduce this issue with markers.

Is it possible to achieve? Kindly help.

I think

  • layout.xaxis.rangemode: 'tozero', and
  • layout.yaxis.rangemode: 'tozero'

are what you’re looking for.

More info -> https://plot.ly/javascript/reference/#layout-xaxis-rangemode

Hi etienne,

I have already tried this options and updated in example as well. This is not working. Kindly refer attached screenshot.

You’ll need to set the xaxis.range. On type: 'category' axes like yours each category is mapped to an integer starting from 0. So setting xaxis.range: [0, x.length - 1] where x is your x-coordinate array, should do the trick.

1 Like

Thank you so much etienne. It’s working as expected.

Thanks for this question @VijayThapak and the solution @etienne.
Can this also work if I am having more than one scatter plot in the same graph?

So for example, if my return statement is as follows -

return {‘data’: [trace0, trace1],
‘layout’: go.Layout(title='Title text,
yaxis=dict(title=‘level (dBm)’),
xaxis=dict(tickmode=‘auto’),
legend=dict(orientation=“h”),
plot_bgcolor=‘rgb(245,245,240)’,
margin=dict(l=200, pad=4))}
produces a line graph like this…

Can I reduce the gap using the xaxis.range:[0,x.length-1] as you suggested?

Thanks
Ananth