Data overflowing on axes on zoom

I have an issue where the data on a plot will overflow (or appear on top of) the axes when I zoom.

This only happens after the plot is redrawn (ie. an angular app where the dataset has changed which triggers a callback to redraw the plot). The initial rendering of the plot behaves as expected

Even more confusing is that if I revert to the original dataset (ie. filter, redraw, remove filter, redraw) the issue no longer happens.

Here is the initial plot:

Here is the plot after redrawing and zooming slightly:

I get the same behavior whether I use plotly.react, plotly.newPlot.

I am using Plotly 2.3.0

Here is the code that calls the plot:

let layout:any = {
hovermode: ‘closest’,
yaxis: {
title: ‘Parameter Name’,
type: yaxis_type,
domain: [0.21, 1]
yaxis2: {
title: '# ',
zeroline: false,
domain: [0, 0.14]
xaxis: {
type: ‘date’,
anchor: ‘y2’,
tickvals: tt.ticks,
ticktext: tt.text,
title: ‘Date’,
range: [startDate.getTime(), endDate.getTime()]
boxmode: ‘group’,
margin: {
t: 30
Plotly.newPlot(‘main-plot’, traces, layout, {modeBarButtonsToRemove: [‘sendDataToCloud’]});

Bumping this up.

Let me know if the problem isn’t clear. This issue is prevalent across my app and it really makes the plots quite hard to look at.

I’ve only ever seen this kind of behaviour in Plotly (Python in my case) when using a transition: fig.update_layout(transition=dict(...)) (Layout in Python)

Do you have animation like that in your system?


Thanks for the reply. I don’t have any ‘animations’. Simply a callback that fires the initial Plotly.newPlot() as shown above.

It looks like the ‘data’ layer is being drawn after (on top of) the axes…


Thinking about your reply more, I do think my issue has the some similarities. While I’m not using an ‘animation’ per se, I do only see this issue after I ‘re-draw’ the plot with updated data. The initial rendering happens as expected.

Can you give me any more info on what you observed and learned?

I didn’t learn a lot, I’m afraid. I tried using fig.update_layout(transition=dict(...)) on quite a complex figure, and found intermittent behaviour that looks a bit like what you are seeing. I just gave up using transition, and as yet haven’t tried raising it as an issue (or for that matter tried it on the most recent version of plotly).

So I was speculating - ‘transition’ is using (or at least doing a similar thing to) CSS animations (animation - CSS: Cascading Style Sheets | MDN), so I wondered if it might be possible there could be CSS animation set in a stylesheet that could affect the figure in the same way?

I’m afraid I doubt this will be helpful - the more I write here the less convinced I am this has anything to do with your problem.

Are you able to provide a runnable complete code example that demonstrates the issue?