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

What do xanchor and yanchor mean?

I’m having a lot of trouble figuring out what these mean and how they’re supposed to be used.

In the “Add a logo” example in, there’s the Vox logo, and it’s set to xanchor right and yanchor bottom. If I change the xanchor to “left”, the image moves a little to the right. wtf? If I change it to “center”, it moves to right, but not as far as “left”.

Changing yanchor to “top”, moves the image down, and likewise “middle” moves it down but not as much as “top”.

I might have expected bottom/top to mirror the location of the image, since xref and yref are both “paper” and x,y is 1,1.05 (and with paper, x and y numbers should only range from 0-1, so slightly more confusion there).

Can anyone explain what’s going on?

1 Like

So xanchor and yanchor can be thought of as the place on an image where x and y refer to. In your annotations you have the options x, y, xanchor, yanchor, and so on. For example, let’s say you set your variables to


This means that the left side of your image will be positioned at x=2.If xnachor was set to middle, then the middle of the image would be at x=2.

1 Like

Thanks. what you said helps me a lot.