Axis Ticks not flushed with Graph Border

[dkadyrov]

I am having some frustration trying to figure out (searching, trial and error) how to flush Plotly axis and the zero tick.

here is my code:

import plotly.go_objects as go

fig = go.Figure()
fig.add_trace(
    go.Scatter(
        x=x,
        y=y,
        name=label,
        mode="markers",
        marker=dict(size=10),
        opacity=0.5,
    )
)
fig.update_layout(
    font_family="Arial",
    template="simple_white",
    title={"x": 0.5, "y": 0.9, "xanchor": "center", "yanchor": "top"},
    yaxis=dict(mirror=True, ticks="outside", range=[0, 1]),
    xaxis=dict(mirror=True, ticks="outside"),
    legend=dict(
        yanchor="top", xanchor="right", borderwidth=0.5, x=0.995, y=0.99
    ),
)

StackOverflow Post

[Vorril]

Same issue here trying to plot with ticks = 'outside' and it does not seem to be an issue with the theme/template as some people have said. Adjusting the axis position leads to several graphical errors as well (especially with mirrored axes) and isn't a solution. I think the problem may actually be with the axis drawing and not the ticks. The high end is also misaligned not just near tick0.

This is a very serious issue in my opinion these graphs are not publication quality with such alignment errors.

[alexcjohnson]

I see your point, but there's an argument to be made that the current behavior is actually more correct: the zero tick mark is pointing at the value zero, while the bottom axis line is bordering the chart on the outside. Since the axis is intended to go to zero, that means the top of the axis line should be at the middle of the zero tick mark. If the two were aligned, that would mean the axis line is covering up the very bottom of the axis.

I was going to suggest that if what you want is a line centered on zero, use the zero line instead of the axis line. Unfortunately that has other artifacts that I would definitely consider to be bugs: the y axis line stops slightly short of flush with the bottom of the zero tick mark, and the x axis tick marks have a gap with the zero line.

[charlesmoatti]

Yes I have the same problem

although I set the yaxis_range to [0.88, 1], the first tick and the xaxis are not properly aligned... Weirdly, when I set yaxis_ticks to "inside", it is then properly aligned.

[alexcjohnson]

Given that there are reasons to prefer either the way this is currently done (axis line bordering the plot area on the outside) or the alignment being requested here (axis line centered on the end of the counter-axis range) I'd say we can consider this a feature request. Implementation would need to be in plotly.js, so I'll transfer the issue over there. I'm not sure quite sure what the API should be - something like axis.lineposition: 'outside' (default, current behavior) | 'centered' (new behavior) perhaps?

If anyone is interested in working on a PR for this, one of the keys will be a test figure with fat differently-colored semi-transparent lines on all axes and ticks so we can clearly see exactly how they all meet each other - similar to what we've done in https://github.com/plotly/plotly.js/blob/master/test/image/baselines/20.png (notice how you can see that the x axes continue out into the corners but the y axes don't, so we cover every desired pixel exactly once) but with explicit axis ranges and using the new attribute.

[moonlighthalfwindow]

Has anyone found any good solutions?