Plotly is trashing the domain

plotly.js
1

This is wierd. I want to have a few traces on one subplot and then a few more on a different subplot, but only one traces is showing up per subplot.

One thing that I noticed is that before calling “newplot” then layout seems reasonable enough but after calling newplot then layout.yaxis.domain has been turned into “[0.7, 1, 0.5263157894736842: undefined]”.

I guess I am missing something silly, but I can’t find it…

T.

// 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);
2

The solution is here:::
https://chart-studio.plotly.com/~empet/15704/example-of-subplots-with-rows2/#/

3

OK, now the next bit. Horizontal bars… I can come close with the text below

but the text on the bars doesnt align. If I does “basic” horizontal bar charts then the text is well positioned in the center of each bar. But when I do subplots they get out of alignment.,

Thoughts?

Also on codepen…

https://codepen.io/PlotlyBeginner/pen/xxQvade

const layout = {
    legend : {orientation: 'h'},
    width : 1500,
    height : 600,
    title :  {
      text: 'Subplots with 2 plot windows referenced to a single xaxis<br>a horizontal bar chart<br>and a subplot with multiple yaxes',
      x: 0.5
    },
    grid:  {rows: 2, columns: 1}, 
    xaxis:  {anchor: 'y',  domain: [0.05, 0.95] }, 
    yaxis:  {anchor: 'x',  domain: [0., 0.4]},
    yaxis2: {anchor: 'x', domain: [0.5, 0.95], type: 'category', bargap: 0.01,
    categoryorder: 'array',
    categoryarray: ["Wella", "Wellb","Wellc", "Welld"]},
    yaxis3: {anchor: 'free', overlaying: 'y', side: 'left', position: 0.0},
    yaxis4: {anchor: 'x', overlaying: 'y', side: 'right'},
    yaxis5: {anchor: 'free', overlaying: 'y', side: 'right', position: 1.0}
};

var trace1a = {
  type: 'bar',
  y: ["Wella","Wella","Wella"],
  x: [1,2,1],
  orientation: 'h',
  base: [0,2,5],
  name: 'y2a data',
  width: 0.3,
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace1b = { 
  type: 'bar',
  y: ["Wellb","Wellb","Wellb"],
  x: [2,1,2],
  orientation: 'h',
  base: [0,3,5],
    width: 0.3,
  name: 'y2b data',
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace1c = { 
  type: 'bar',
  y: ["Wellc","Wellc","Wellc"],
  x: [3,1,2],
    width: 0.3,
  orientation: 'h',
  base: [0,3.5,5],
  name: 'y2c data',
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace1d = { 
  type: 'bar',
  y: ["Welld","Welld","Welld"],
  x: [1,1,0.5],
    width: 0.3,
  orientation: 'h',
  base: [0.5,3.5,5.5],
  name: 'y2d data',
  xaxis: 'x',
  yaxis: 'y2' 
};

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


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



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


var trace5 = {
  x: [5, 6, 7],
  y: [350, 500, 600],
  name: 'y5 data',
  xaxis: 'x',
  yaxis: 'y5',
  type: 'scatter'
};

// And let's go

const traces = [trace1a, trace1b, trace1c, trace1d, trace2, trace3, trace4, trace5];

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

If I draw the lines as scatter plots then they align correctly.

const layout = {
    legend : {orientation: 'h'},
    width : 1500,
    height : 600,
    title :  {
      text: 'Subplots with 3 plot windows referenced to a single date axis <br> including two horizontal bar charts and a subplot with multiple yaxes',
      x: 0.5
    },
    grid:  {rows: 3, columns: 1}, 
    xaxis:  {anchor: 'y',  domain: [0.05, 0.95] , type: 'date'}, 
    yaxis:  {anchor: 'x',  domain: [0., 0.3]},
    yaxis2: {anchor: 'x', domain: [0.35, 0.6],  type: 'category', bargap: 0.01,
       categoryorder: 'array',
       categoryarray: ["Wella", "Wellb","Wellc", "Welld"]},
    yaxis3: {anchor: 'free', overlaying: 'y', side: 'left', position: 0.0},
    yaxis4: {anchor: 'x', overlaying: 'y', side: 'right'},
    yaxis5: {anchor: 'free', overlaying: 'y', side: 'right', position: 1.0},
    yaxis6: {anchor: 'x', domain: [0.65, 1.0], type: 'category',
       categoryorder: 'array',
       categoryarray: ["Wella", "Wellb","Wellc", "Welld"]},
};

//  x is the delta time om milliseconds, base is the time start
var trace1a = {
  type: 'bar',
  y: ["Wella", "Wella", "Wella"],
  x: [40000000.0, 6000000000.0, 200000000.0],
  orientation: 'h',
  base: ['2023-01-04 22:23:00', '2023-01-14 22:23:00','2023-05-04 22:23:00'],
  name: 'Wella',
  width: 0.3,
  xaxis: 'x',
  yaxis: 'y2'
};

var trace1b = { 
  type: 'bar',
  y: ["Wellb", "Wellb", "Wellb"],
  base: ['2023-02-04 22:23:00', '2023-03-04 22:23:00', '2023-04-07 22:23:00'],
  orientation: 'h',  
   x: [80000000.0, 600000000.0, 200000000.0],
    width: 0.3,
  name: 'Wellb',
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace1c = { 
  type: 'bar',
  y:  ["Wellc", "Wellc", "Wellc"],
   base: ['2023-02-14 12:23:00', '2023-03-01 22:23:00', '2023-04-01 22:23:00'],
    width: 0.3,
  orientation: 'h',
   x: [120000000.0, 600000000.0, 500000000.0],
  name: 'Wellc',
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace1d = { 
  type: 'bar',
    y: ["Welld", "Welld", "Welld"],
 base: ['2023-01-04 22:23:00', '2023-04-01 22:23:00', '2023-05-02 22:23:00'],
    width: 0.3,
  orientation: 'h',
  x: [5000000000.0, 100000000.0, 500000000.0],
  name: 'Welld',
  xaxis: 'x',
  yaxis: 'y2' 
};

var trace2 = {
  x: ['2023-01-08 22:23:00', '2023-02-01 22:23:00', '2023-03-04 22:23:00'],
  y: [4, 5, 6],
  name: 'y5 data',
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter'
};


var trace3 = {
  x: ['2023-01-24 22:23:00', '2023-02-14 22:23:00', '2023-05-04 22:23:00'],
  y: [40, 50, 60],
  name: 'y3 data',
  xaxis: 'x',
  yaxis: 'y3',
  type: 'scatter'
};


var trace4 = {
  x: ['2023-03-04 22:23:00', '2023-04-04 22:23:00', '2023-05-04 22:23:00'],
  y: [40000, 50000, 60000],
  name: 'y4 data',
  xaxis: 'x',
  yaxis: 'y4',
  type: 'scatter'
};


var trace5 = {
  x: ['2023-02-09 22:23:00', '2023-02-15 22:23:00', '2023-03-04 22:23:00'],
  y: [350, 500, 600],
  name: 'y5 data',
  xaxis: 'x',
  yaxis: 'y5',
  type: 'scatter'
};


var traces = [trace1a, trace1b, trace1c, trace1d, trace2, trace3, trace4, trace5 ];

var mysum = []
var mylis = []
var nt, pt
for (let p of [trace1a, trace1b, trace1c, trace1d]){
  nt = {...p}
  mysum = []
  mylis = []
  for (let i = 0; i < p.base.length; i++) {
    var pt = new Date(p.base[i])
    var pt1 = new Date(pt.getTime() + p.x[i])
    var pt2 = new Date(pt.getTime() + 1.01*p.x[i])
    console.log(pt.toISOString(),pt1.toISOString(),pt2.toISOString())
    mysum.push(pt.toISOString(), pt1.toISOString(),
               pt2.toISOString()  );
    mylis.push(p.name, p.name, null)
  }
  nt.x = Array.from(mysum)
  nt.y = Array.from(mylis)
  nt.yaxis = 'y6'
  nt.type = 'scatter'
  nt.mode =  'lines'
  nt.line = {width: 7}
  nt.connectgaps = false
  delete(nt.base)
  delete(nt.offset)
  delete(nt.orientation)
  delete(nt.width)
  traces.push(nt)
} 

// And let's go
console.log(traces)
Plotly.newPlot('myDiv', traces, layout);

CodePen