Data not showing up in Plotly Javascript plot. Overlay issue?

plotly.js
1

I have a fairly complex plot with two subplots, each with three axes, and eight total “traces.” Some of my data does not show up in the plot.

I have run into this before, and managed to “fix” the problem through trial and error. However, I can’t seem to find a combination of overlays that works.

Just a note: the code below is JSON.stringify output from a particular instance of this plot I’m trying to produce. The plot is generated programmatically from table data in a database. So what I really need is a generic solution that involves a better understanding of the overlaying property and how to use it.

https://jsfiddle.net/abalter/ag2Lrf5d/

HTML:

<div id="plot"></div>

DATA:

var data = 
[
  {
    "x": [
      "2015-7-19",
      "2016-2-8",
      "2016-2-17",
      "2016-3-26"
    ],
    "y": [
      24,
      19,
      29,
      38
    ],
    "name": "Primary Tumor (mm)",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>7\/19\/2015<br \/><b>Primary Tumor<\/b>: 24 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/8\/2016<br \/><b>Primary Tumor<\/b>: 19 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/17\/2016<br \/><b>Primary Tumor<\/b>: 29 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/26\/2016<br \/><b>Primary Tumor<\/b>: 38 mm<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "lines+markers",
    "marker": {
      "size": 11,
      "color": "hsl(0, 80%, 50%)",
      "symbol": 4
    },
    "line": {
      "width": 2
    },
    "yaxis": "y",
    "uid": "cbe1fa"
  },
  {
    "x": [
      "2015-7-2",
      "2016-2-12",
      "2016-2-29"
    ],
    "y": [
      22,
      13,
      17
    ],
    "name": "Peripancreatic Lymph Node (mm)",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>7\/2\/2015<br \/><b>Tumor Size<\/b>: 22 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/12\/2016<br \/><b>Tumor Size<\/b>: 13 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/29\/2016<br \/><b>Tumor Size<\/b>: 17 mm<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "lines+markers",
    "marker": {
      "size": 11,
      "color": "hsl(51.42857142857143, 80%, 50%)",
      "symbol": 8
    },
    "line": {
      "width": 2
    },
    "yaxis": "y",
    "uid": "3003ae"
  },
  {
    "x": [
      "2015-7-7",
      "2016-2-5"
    ],
    "y": [
      13,
      15
    ],
    "name": "Portocaval Lymph Node (mm)",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>7\/7\/2015<br \/><b>Tumor Size<\/b>: 13 mm<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/5\/2016<br \/><b>Tumor Size<\/b>: 15 mm<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "lines+markers",
    "marker": {
      "size": 11,
      "color": "hsl(102.85714285714286, 80%, 50%)",
      "symbol": 12
    },
    "line": {
      "width": 2
    },
    "yaxis": "y",
    "uid": "5cc648"
  },
  {
    "x": [
      "2016-2-16",
      "2016-3-15",
      "2016-3-17",
      "2016-3-25",
      "2016-3-27",
      "2016-3-28",
      "2016-3-31",
      "2016-4-3",
      "2016-4-6",
      "2016-4-11",
      "2016-4-12",
      "2016-4-13",
      "2016-4-15",
      "2016-4-15",
      "2016-4-17",
      "2016-4-22",
      "2016-4-24",
      "2016-4-26",
      "2016-4-30",
      "2016-5-5",
      "2016-5-13",
      "2016-5-19"
    ],
    "y": [
      89.767,
      89.812,
      88.905,
      87.952,
      88.4,
      88.3,
      97.7,
      95.4,
      91.6,
      89.5,
      87.9,
      88.6,
      87.8,
      86.1,
      84.3,
      85,
      87.4,
      88.2,
      89.3,
      86.2,
      80.604,
      82.192
    ],
    "name": "Weight (kg)",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/16\/2016<br \/><b>Weight<\/b>: 89.767 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/15\/2016<br \/><b>Weight<\/b>: 89.812 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/17\/2016<br \/><b>Weight<\/b>: 88.905 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/25\/2016<br \/><b>Weight<\/b>: 87.952 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/27\/2016<br \/><b>Weight<\/b>: 88.4 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/28\/2016<br \/><b>Weight<\/b>: 88.3 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/31\/2016<br \/><b>Weight<\/b>: 97.7 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/3\/2016<br \/><b>Weight<\/b>: 95.4 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/6\/2016<br \/><b>Weight<\/b>: 91.6 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/11\/2016<br \/><b>Weight<\/b>: 89.5 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/12\/2016<br \/><b>Weight<\/b>: 87.9 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/13\/2016<br \/><b>Weight<\/b>: 88.6 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/15\/2016<br \/><b>Weight<\/b>: 87.8 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/15\/2016<br \/><b>Weight<\/b>: 86.1 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/17\/2016<br \/><b>Weight<\/b>: 84.3 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/22\/2016<br \/><b>Weight<\/b>: 85 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/24\/2016<br \/><b>Weight<\/b>: 87.4 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/26\/2016<br \/><b>Weight<\/b>: 88.2 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>4\/30\/2016<br \/><b>Weight<\/b>: 89.3 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>5\/5\/2016<br \/><b>Weight<\/b>: 86.2 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>5\/13\/2016<br \/><b>Weight<\/b>: 80.604 kg<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>5\/19\/2016<br \/><b>Weight<\/b>: 82.192 kg<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "lines+markers",
    "marker": {
      "size": 11,
      "color": "hsl(154.28571428571428, 80%, 50%)",
      "symbol": 16
    },
    "line": {
      "width": 2
    },
    "yaxis": "y2",
    "uid": "8ff97d"
  },
  {
    "x": [
      "2016-3-2"
    ],
    "y": [
      83.7
    ],
    "name": "CA19-9 (U\/ml)",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/2\/2016<br \/><b>CA19-9<\/b>: 83.7 U\/ml<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "lines+markers",
    "marker": {
      "size": 11,
      "color": "hsl(205.71428571428572, 80%, 50%)",
      "symbol": 20
    },
    "line": {
      "width": 2
    },
    "yaxis": "y3",
    "uid": "9c03a5"
  },
  {
    "x": [
      "2015-10-25",
      "2015-11-29",
      "2015-12-13",
      "2015-12-28",
      "2015-12-29",
      "2016-1-27",
      "2016-2-4"
    ],
    "y": [
      0,
      0,
      0,
      0,
      0,
      0,
      0
    ],
    "name": "Treatment",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>10\/24\/2015<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>11\/28\/2015<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>12\/12\/2015<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>12\/27\/2015<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>12\/28\/2015<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>1\/27\/2016<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>2\/4\/2016<br \/><b>Type<\/b>: gemcitabine + Abraxane<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "markers",
    "marker": {
      "size": 11,
      "color": "hsl(257.14285714285717, 80%, 50%)",
      "symbol": 24
    },
    "line": {
      "width": 2
    },
    "yaxis": "y4",
    "uid": "c1f73f"
  },
  {
    "x": [
      "2015-10-18",
      "2016-3-27"
    ],
    "y": [
      0,
      0
    ],
    "name": "Samples and Procedures",
    "text": [
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>10\/17\/2015<br \/><b>Type<\/b>: FNA<br \/>",
      "<b>Patient: <\/b>4442<br \/><b>Date: <\/b>3\/27\/2016<br \/><b>Type<\/b>: Whipple<br \/>"
    ],
    "hoverinfo": "text",
    "type": "scatter",
    "mode": "markers",
    "marker": {
      "size": 11,
      "color": "hsl(308.57142857142856, 80%, 50%)",
      "symbol": 28
    },
    "line": {
      "width": 2
    },
    "yaxis": "y5",
    "uid": "d4f70f"
  }
];

LAYOUT:

var layout = 
{
  "titlefont": {
    "size": 36
  },
  "height": 800,
  "width": 1200,
  "hovermode": "closest",
  "xaxis": {
    "title": "<b>Date<\/b>",
    "position": 0,
    "domain": [
      0.2,
      1
    ],
    "type": "date",
    "tickmode": "auto",
    "showline": true,
    "nticks": 12,
    "tickangle": 45,
    "linewidth": 2,
    "tickfont": {
      "size": 14
    },
    "titlefont": {
      "size": 14
    },
    "range": [
      1433481696661.8,
      1465979903338.2
    ],
    "autorange": true
  },
  "yaxis2": {
    "titlefont": {
      "size": 14,
      "color": "hsl(154.28571428571428, 80%, 50%)"
    },
    "ticklength": 10,
    "tickfont": {
      "size": 14,
      "color": "hsl(154.28571428571428, 80%, 50%)"
    },
    "side": "left",
    "color": "hsl(154.28571428571428, 80%, 50%)",
    "linecolor": "hsl(154.28571428571428, 80%, 50%)",
    "showline": true,
    "position": 0.1,
    "range": [
      79.604,
      98.7
    ],
    "domain": [
      0,
      0.8
    ],
    "overlaying": "y5",
    "title": "<b>Weight (kg)<\/b>",
    "nticks": 7,
    "showgrid": false,
    "showticklabels": true,
    "gridcolor": "hsl(205.71428571428572, 80%, 50%)",
    "type": "linear"
  },
  "yaxis3": {
    "titlefont": {
      "size": 14,
      "color": "hsl(205.71428571428572, 80%, 50%)"
    },
    "ticklength": 10,
    "tickfont": {
      "size": 14,
      "color": "hsl(205.71428571428572, 80%, 50%)"
    },
    "side": "left",
    "color": "hsl(205.71428571428572, 80%, 50%)",
    "linecolor": "hsl(205.71428571428572, 80%, 50%)",
    "showline": true,
    "position": 0.2,
    "range": [
      82.7,
      84.7
    ],
    "domain": [
      0,
      0.8
    ],
    "overlaying": "y5",
    "title": "<b>CA19-9 (U\/ml)<\/b>",
    "nticks": 7,
    "showgrid": false,
    "showticklabels": true,
    "gridcolor": "hsl(257.14285714285717, 80%, 50%)",
    "type": "linear"
  },
  "yaxis4": {
    "titlefont": {
      "size": 14,
      "color": "hsl(257.14285714285717, 80%, 50%)"
    },
    "ticklength": 10,
    "tickfont": {
      "size": 14,
      "color": "hsl(257.14285714285717, 80%, 50%)"
    },
    "side": "left",
    "color": "hsl(257.14285714285717, 80%, 50%)",
    "linecolor": "hsl(257.14285714285717, 80%, 50%)",
    "showline": false,
    "domain": [
      0.9,
      1
    ],
    "overlaying": "y5",
    "autorange": true,
    "nticks": 0,
    "showgrid": false,
    "showticklabels": false,
    "position": 0.3,
    "type": "linear",
    "range": [
      -1,
      1
    ]
  },
  "yaxis5": {
    "titlefont": {
      "size": 14,
      "color": "hsl(308.57142857142856, 80%, 50%)"
    },
    "ticklength": 10,
    "tickfont": {
      "size": 14,
      "color": "hsl(308.57142857142856, 80%, 50%)"
    },
    "side": "left",
    "color": "hsl(308.57142857142856, 80%, 50%)",
    "linecolor": "hsl(308.57142857142856, 80%, 50%)",
    "showline": false,
    "domain": [
      0.8,
      0.9
    ],
    "overlaying": "y5",
    "autorange": true,
    "nticks": 0,
    "showgrid": false,
    "showticklabels": false,
    "position": 0.3,
    "type": "linear",
    "range": [
      -1,
      1
    ]
  },
  "yaxis": {
    "titlefont": {
      "size": 14,
      "color": "hsl(102.85714285714286, 80%, 50%)"
    },
    "ticklength": 10,
    "tickfont": {
      "size": 14,
      "color": "hsl(102.85714285714286, 80%, 50%)"
    },
    "side": "left",
    "color": "hsl(102.85714285714286, 80%, 50%)",
    "linecolor": "hsl(102.85714285714286, 80%, 50%)",
    "showline": true,
    "position": 0,
    "range": [
      0,
      50
    ],
    "domain": [
      0,
      0.8
    ],
    "overlaying": "y5",
    "title": "<b>Tumor Size (mm)<\/b>",
    "nticks": 7,
    "showgrid": false,
    "showticklabels": true,
    "gridcolor": "hsl(154.28571428571428, 80%, 50%)",
    "type": "linear"
  }
};

PLOTLY CALL:

Plotly.newPlot('plot', data, layout);
2

Looks like you’re setting up a base yaxis5 and then overlaying the y- axes on top of it.

In this scenario, things don’t seems to behave well in comparison to the traditional https://plot.ly/javascript/multiple-axes/ where the base y-axis is set through layout.yaxis.

I’m not sure if it’s a bug on our part or a design constraint. We do sort the layout axis keys based on their id (yaxis comes first than yaxis2 and so on) in a few places in our code. So I’m not surprised that your example doesn’t work. More investigation is needed though.

I think I got your example to work simply by removing the overlaying key in layout.yaxis and replacing all the overlaying: 'y5' settings by overlaying: 'y'.

3

Here’s the link the working example: https://jsfiddle.net/ag2Lrf5d/5/

4

It’s definitely closer in that all the data now shows up. Although, the two traces plotted along the horizontal lines, “Treatment” and “Samples and Procedures”, are supposed to appear above the time series traces (CA199, Weight, tumor sizes). Notice the domains. The time series y-axes are [0,0.8], while the other two are [0.8,0.9] and [0.9,1.0] respectively.