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

**URL:** <https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362>\
**Category:** plotly.js\
**Created:** [June 22, 2016, 2:58pm UTC](https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362 "2016-06-22T14:58:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abalter](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@abalter](https://community.plotly.com/u/abalter)\
**Post date:** [June 22, 2016, 2:58pm UTC](https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362/1 "2016-06-22T14:58:09Z")

</div>

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](http://stackoverflow.com/questions/37386590/plotly-js-data-not-showing-something-to-do-with-overlay), 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/](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);
```

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [June 23, 2016, 7:08pm UTC](https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362/2 "2016-06-23T19:08:21Z")

</div>

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/](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'`.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [June 23, 2016, 7:08pm UTC](https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362/3 "2016-06-23T19:08:40Z")

</div>

Here’s the link the working example: [https://jsfiddle.net/ag2Lrf5d/5/](https://jsfiddle.net/ag2Lrf5d/5/)

---

<div class="post-metadata">

**Author:** ![abalter](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@abalter](https://community.plotly.com/u/abalter)\
**Post date:** [June 27, 2016, 3:27am UTC](https://community.plotly.com/t/data-not-showing-up-in-plotly-javascript-plot-overlay-issue/1362/4 "2016-06-27T03:27:20Z")

</div>

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.