newPlot mysteriously changes traces.yaxis and layout.yaxis.domain settings

plotly.js
1

Really strange problem here. I hard-coded a stacked time series chart with great success, as follows:

  var traces = [];
  obj = {
    name: 'Metric1',
    x: metric1.dataTable[0],
    y: metric2.dataTable[1],
    marker: {color: color1},
    xaxis: 'x',
    yaxis: 'y',
    fill: 'tonexty',
    type: 'scatter',
  };
  traces.push(obj);
  var obj = {
    name: 'Metric2',
    x: metric2.dataTable[0],
    y: metric2.dataTable[1],
    marker: {color: color2},
    xaxis: 'x',
    yaxis: 'y2',
    fill: 'tonexty',
    type: 'scatter'
  };
  traces.push(obj);

… several more times, incrementing yaxis as y3, y4, …

and relatedly, the layout:

  var layout = {
    height: 1000,
    title: chartLabel,
    legend: { orientation: 'v'},
    xaxis: {
      anchor: 'y'
    },
    yaxis: {
      anchor: 'x',
      title: '',
      titlefont: {color: color1},
      tickfont: {color: color1},
      domain: [
        0,
        0.1
      ]
    },
    yaxis2: {
      anchor: 'x',
      title: '',
      titlefont: {color: color2},
      tickfont: {color: color2},
      domain: [
        0.11,
        0.2
      ]
    },

… several more times

Cool! Everything works great, a nice top-down series of stacked time series charts that provide for visual correlation of variables along a time line.

So now I want to make this dynamic, based on user input/form selections. Without going into laborious detail, I coded some loops to build the structures above. I’ve used the debugger in Chrome to watch the variables before and after I execute:

Plotly.newPlot(‘chartDiv’, chartData, layout);

Before the above call, chartData and layout are perfect, notedly with respect to chartData.y, chartData.y2 … and layout.yaxis.domain, layout.yaxis2.domain, …

After I watch though, that Plotly.newPlot call seems to modify y2/yaxis2.domain variables in such a way that they overlay y/yaxis settings. Really strange, because the hard-coded and dynamic approaches feed in the same exact objects. But then in the second item of each array gets changed, so y2–> y, etc. and the first two series unintentionally overlay one another, after which the new y2 … yN look fine. Really strange. I’ve reviewed with a friend and this just doesn’t make sense to either of us.

Here’s a JSFiddle that represents the problem clearly. Lines 50-56 are the ones to focus on. With them, the first two series overlay because y2, y3, y4 all get shifted down and become y, y2, y3 when the call to Plotly.plot happens. If you comment out lines 50-56 and rely instead on the hard-coded attribute settings, then all is well.

Weird.

Any ideas, going nuts trying to chase this one down. Thanks in advance.

2

Fixed it. See rev 3 of the JSFiddle if interested.

3

See https://github.com/plotly/plotly.js/issues/1282 for more information on the topic