WIth plotly javascript, how can I have multiple traces on subplots, each with multiple y-axes?

Question

This is very odd. I'm trying to create two subplots with three traces in the top plot and two in the second plot. The axes plot just the way that I want them to. But few of the traces appear, just the last trace of each subplot.

// Create data for the first subplot (three traces)
const trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  yaxis: 'y1', // Assign to the first y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 1'
};

const trace2 = {
  x: [1, 2, 3],
  y: [6, 5, 4],
  yaxis: 'y2', // Assign to the second y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 2'
};

const trace3 = {
  x: [1, 2, 3],
  y: [2, 1, 2],
  yaxis: 'y3', // Assign to the third y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 3'
};

// Create data for the second subplot (two traces)
const trace4 = {
  x: [1, 2, 3],
  y: [8, 9, 10],
  yaxis: 'y4', // Assign to the fourth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 1'
};

const trace5 = {
  x: [1, 2, 3],
  y: [10, 9, 7],
  yaxis: 'y5', // Assign to the fifth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 2'
};

// Define layout for the subplots with individual y-axes
// Define layout for the subplots
const layout = {
  title: 'Two Subplots with Different Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1}, 
  xaxis: {range: [0, 5], domain: [0.1, 0.9]}, // Adjust x-axis domain to make space for the y-axis text
  yaxis: {range: [0, 10],title: 'Y-axis 1', side: 'left', position:0, anchor: 'free' ,
          domain: [0.7,1.0]}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2',  side: 'right', position: 0.95, anchor: 'free',
          domain: [0.7,1.0]}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', anchor: 'free',  side: 'left', position: 0.08,
          domain: [0.7,1.0]}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', anchor: 'free',   position: 0.00, domain: [0.0,0.5]}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', position: 0.08, 
           anchor: 'free', domain: [0.0,0.5]}, // Y-axis 5 with manual position
};

// Create the subplots
const traces = [trace1, trace2, trace3, trace4, trace5];

Plotly.newPlot('myDiv', traces, layout);

If I try a minor tweak to the layout then all five curves show up, and all axes. But now there is only one subplot, and everything is painted on top of itself, despite the "suggestion" from the domain arrays.

const layout = {
  title: 'Two Subplots with Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1},
  subplots: [['xy'], ['xy']],
  xaxis: {domain: [0.2, 1.0]}, // Adjust x-axis domain
  yaxis: {title: 'Y-axis 1', domain: [0.7, 1.0], anchor: 'x', side: 'left'}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 5 with manual position
};

Any suggestions for how to debug? Thanks...

Answer 1

I found on chart studio a python example that addressed the same problem, here is their answer converted over to Javascript. It has everything that I needed - what I was missing was the requirement to overlay...

Thanks to ~empet/15704/

const layout = {
    width : 900,
    height : 600,
    title :  {
      text: 'Subplots with 3 plot windows referenced to a single yaxis<br>and a subplot with multiple yaxes',
      x: 0.5
    },
    grid:  {rows: 2, columns: 2}, 
    xaxis:  {anchor: 'y',  domain: [0.0, 0.45] },
    xaxis2: {anchor: 'y2', domain: [0.55, 1.0] },
    xaxis3: {anchor: 'y3', domain: [0.0, 0.45] },
    xaxis4: {anchor: 'y4', domain: [0.55, 1.0] },
    yaxis:  {anchor: 'x',  domain: [0.575, 1.0]},
    yaxis2: {anchor: 'x2', domain: [0.575, 1.0]},
    yaxis3: {anchor: 'x3', domain: [0.0, 0.425]},
    yaxis4: {anchor: 'x4', domain: [0.0, 0.425]},
    yaxis5: {anchor: 'free', overlaying: 'y4', side: 'left', position: 0.5},
    yaxis6: {anchor: 'x4', overlaying: 'y4', side: 'right'},
    yaxis7: {anchor: 'free', overlaying: 'y4', side: 'right', position: 0.9}
};


var trace1a = {
  x: [0, 1],
  y: [2, 3],
  name: 'y1a data',
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter'
};

var trace1b = {
  x: [0,0.5, 1],
  y: [1, 4, 2],
  name: 'y1b data',
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter'
};


var trace2a = {
  x: [0, 1],
  y: [3, 2],
  name: 'y2a data',
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var trace2b = {
  x: [0,0.5, 1],
  y: [2, 4, 1],
  name: 'y2b data',
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};


var trace3a = {
  x: [0, 1],
  y: [2, 3],
  name: 'y3a data',
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};

var trace3b = {
  x: [0,0.5, 1],
  y: [1, 3, 1],
  name: 'y3b data',
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};


var trace4 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  name: 'y5 data',
  xaxis: 'x4',
  yaxis: 'y4',
  type: 'scatter'
};


var trace5 = {
  x: [2, 3, 4],
  y: [40, 50, 60],
  name: 'y5 data',
  xaxis: 'x4',
  yaxis: 'y5',
  type: 'scatter'
};



var trace6 = {
  x: [4, 5, 6],
  y: [40000, 50000, 60000],
  name: 'y6 data',
  xaxis: 'x4',
  yaxis: 'y6',
  type: 'scatter'
};


var trace7 = {
  x: [5, 6, 7],
  y: [35, 50, 60],
  name: 'y7 data',
  xaxis: 'x4',
  yaxis: 'y7',
  type: 'scatter'
};


// And let's go

const traces = [trace1a, trace1b, trace2a, trace2b, trace3a, trace3b, trace4, trace5, trace6, trace7];

Plotly.newPlot('myDiv', traces, layout);