(Code and Screenshots) When adding traces to an existing graph (and doing a relayout with a new yaxis), the graph lines from the traces from the first plot disappear and all I see are the graph lines from the added traces

[eljefe]

Trying to update the graph with new traces, but first graph lines are then disappearing. I have been able to do it by using the same y-axis, but the amounts are so extremely in a different range, that if I don’ t have a separate yaxis, one items graph will be a nearly flat line. I seem to have a hard time finding detailed documentation on the things that I’m trying to do.

Here’s my code for the first plot – the Plotly.newPlot:

var trace1 = {
  type: "scatter",
  mode: "line",
  name: cs + ' High',
  hoverlabel: {bgcolor: linecolor, font: {color: 'black'}, bordercolor: 'black'},
  x: timearr,
  y: higharr,
  line: {color: linecolor, width:2, shape:'linear', smoothing:0, simplify:false}
}
var trace2 = {
  type: "scatter",
  mode: "line",
  name: cs + ' Low',
  hoverlabel: {bgcolor: linecolor, font:{color: 'black'}, bordercolor: 'black'},
  x: timearr,
  y: lowarr,
  line: {color: linecolor, width:2, shape:'linear', smoothing:0, simplify:false},
}
var layout = {
  title: "<b>" + cn + " (" + cs + ") to USD, 1 Year History, [" + startdate + " - " + enddate + "]</b>",
  font: {size:12, color:"white"},
  paper_bgcolor: "#999999",
  plot_bgcolor: "#999999",
  hoverlabel: {font: {size:16, bgcolor:"white", color:"white", family:"Arial" }},
  dragmode: 'pan',  
  xaxis: {	
	zerolinecolor: 'white',
	showgrid: true,
	gridcolor: '#E6E6E6',
    showticklabels: true,
    tickangle: 45,
    tickcolor: "#E6E6E6",
    showspikes: true,
    spikethickness: 1,
    spikemode: "marker",
    spikecolor: "white",
    spikedash: "solid",
    showline: false,
    zeroline: false,
    range: [startdateforrange, enddate],
  },
  yaxis: {
	showgrid: false,
    autorange: true,
    exponentformat: "none"
  }
};

var data = [trace1,trace2];

$("#content").empty();
Plotly.newPlot('content', data, layout);

And here’s my code that updates the graph:

var trace3 = {
  type: "scatter",
  mode: "line",
  name: cs + ' High',
  hoverlabel: {bgcolor: linecolor, font: {color: 'black'}, bordercolor: 'black'},
  xaxis: 'x',
  x: timearr,
  yaxis: 'y2',
  y: higharr,				  
  line: {color: linecolor, width:2, shape:'linear', smoothing:0, simplify:false}
}
var trace4 = {
  type: "scatter",
  mode: "line",
  name: cs + ' Low',
  hoverlabel: {bgcolor: linecolor, font:{color: 'black'}, bordercolor: 'black'},
  x: timearr,
  yaxis: 'y2',
  y: lowarr,
  line: {color: linecolor, width:2, shape:'linear', smoothing:0, simplify:false}
}
var update = {
  yaxis: {
  side: 'right',
  showgrid: false,
  autorange: true,
  exponentformat: "none" 
  }
}
Plotly.relayout("content", update);
var data = [trace3,trace4];
Plotly.addTraces("content", data);

Here’s the screenshots of the first plot and then the updated graph:

[eljefe]

Never mind. I figure it out. My layout update needed to look like this:

yaxis2: {
  overlaying: 'y',
  showgrid: false,
  gridcolor: '#999999',
  autorange: true,
  exponentformat: "none",
  side:'right'
 }