Data overflowing on axes on zoom

plotly.js
1

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:

plotly plot 1
plotly plot 1757×432 7.37 KB

Here is the plot after redrawing and zooming slightly:

plotly plot 2
plotly plot 2755×439 7.8 KB

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’]});

2

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.

3

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?

4

@davidharris

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…

5

@davidharris

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?

6

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?