I’m trying to figure out what is the same about our plots. Here is my layout variable:
var layout = {
font: {
family:'Roboto',
size: 12,
color: 'rgb(54, 54, 54)'
},
yaxis: {title: "Temperature [C]",
tickmode: "auto",
tickvals: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
ticktext:['off','on','off','on','off','on','off','on','off','on','off','on','off','on','off','on'],
domain: [0,.49],
mirror:'ticks',
showline:true,
linecolor: 'rgb(54, 54, 54)',
ticklen:0,
tickcolor: 'rgb(245, 245, 245)',
linewidth: 1}, // set the y axis title
yaxis2: {title: "Pressure [bara]",
tickmode: "auto",
tickvals: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
ticktext:['off','on','off','on','off','on','off','on','off','on','off','on','off','on','off','on'],
domain: [.51,1],
mirror:'ticks',
showline:true,
linecolor: 'rgb(54, 54, 54)',
linewidth: 1,
ticklen:0,
visible:true,
tickcolor: 'rgb(245, 245, 245)'},
xaxis: {title: "Time (your current local time)",
mirror:'ticks',
showline:true,
linecolor: 'rgb(54, 54, 54)',
linewidth: 1,
tickformat: "%H:%M" // customize the date format to
},
showlegend: true,
paper_bgcolor: 'transparent', //'rgb(245, 245, 245)',
plot_bgcolor: 'rgb(255, 255, 255)',
autosize: false,
legend: {
orientation: "h",
y:-.2,
x:0,
font: {
family:'Roboto',
size: 12,
color: 'rgb(54, 54, 54)'}
},
hoverlabel:{
font: {
family:'Roboto',
size: 12,
},
namelength:(-1)
},
margin: {
l: 60,
r: 60,
b: 40,
t: 30,
pad: 4
},
height: 540,
width: 850
};
I am running two overlapping divs: one is a P5.js canvas and the other is the plotly plot. I made this codepen that simulates the formatting I am using but it doesn’t duplicate the issue: https://codepen.io/murenrb/pen/bYPgbL
I am using restyle to update the arrays and maybe that is somehow causing the issue? I am going to try to play with that more in the codepen and see if I can get it to duplicate.
What is your general setup?