Traces overlap axes when plot is saved

plotly.js
1

I’ve created a chart that updates when the x-axis is moved with a call to an API. When saving the figure, the traces “bleed” outside of the plot area, overlapping with the y-axes. I was wondering if anyone has seen this before/knows a potential solution. I’ve uploaded the png to illustrate what I’m describing.

newplot (11).png933×833 38.4 KB

2

Yikes.

Can you share your data / layout you use to create your graph. Thank you

3

The layout for “plotDiv.layout” is:

    {
  "showlegend": false,
  "paper_bgcolor": "#eee",
  "yaxis2": {
    "title": "<b>mcfd</b>",
    "titlefont": {
      "family": "Segoe UI",
      "position": 0,
      "size": 12,
      "color": "#ff7f0e"
    },
    "side": "right",
    "anchor": "free",
    "position": 0.92497320471597,
    "range": [
      0,
      0
    ],
    "autorange": false,
    "ticks": "outside",
    "tickcolor": "#ff7f0e",
    "showline": true,
    "zeroline": false,
    "linecolor": "#aaa",
    "showgrid": false,
    "showlegend": false,
    "tickfont": {
      "family": "Segoe UI",
      "size": 12,
      "color": "#ff7f0e"
    },
    "overlaying": "y"
  },
  "yaxis3": {
    "title": "<b>BBLs/D</b>",
    "titlefont": {
      "family": "Segoe UI",
      "position": 0,
      "size": 12,
      "color": "#2ca02c"
    },
    "side": "left",
    "anchor": "free",
    "position": 0,
    "range": [
      0,
      0
    ],
    "autorange": false,
    "ticks": "outside",
    "tickcolor": "#2ca02c",
    "showline": true,
    "zeroline": false,
    "linecolor": "#aaa",
    "showgrid": false,
    "showlegend": false,
    "tickfont": {
      "family": "Segoe UI",
      "size": 12,
      "color": "#2ca02c"
    },
    "overlaying": "y"
  },
  "yaxis4": {
    "title": "<b>BBLs/D</b>",
    "titlefont": {
      "family": "Segoe UI",
      "position": 0,
      "size": 12,
      "color": "#d62728"
    },
    "side": "right",
    "anchor": "free",
    "position": 1,
    "range": [
      0,
      0
    ],
    "autorange": false,
    "ticks": "outside",
    "tickcolor": "#d62728",
    "showline": true,
    "zeroline": false,
    "linecolor": "#aaa",
    "showgrid": false,
    "showlegend": false,
    "tickfont": {
      "family": "Segoe UI",
      "size": 12,
      "color": "#d62728"
    },
    "overlaying": "y"
  },
  "xaxis": {
    "title": "<b>Time</b>",
    "domain": [
      0.07502679528403002,
      0.92497320471597
    ],
    "type": "date",
    "titlefont": {
      "family": "Segoe UI",
      "size": 12,
      "color": "#000"
    },
    "range": [
      "1451628000000",
      "1477544400000"
    ],
    "autorange": false,
    "ticks": "outside",
    "showline": true,
    "linecolor": "#aaa",
    "tickcolor": "#aaa",
    "rangemode": "normal",
    "tickfont": {
      "family": "Segoe UI",
      "size": 12
    }
  },
  "yaxis": {
    "title": "<b>BBLs/D</b>",
    "titlefont": {
      "family": "Segoe UI",
      "position": 0,
      "size": 12,
      "color": "#1f77b4"
    },
    "side": "left",
    "anchor": "free",
    "position": 0.07502679528403002,
    "range": [
      0,
      0
    ],
    "autorange": false,
    "ticks": "outside",
    "tickcolor": "#1f77b4",
    "showline": true,
    "zeroline": true,
    "linecolor": "#aaa",
    "showgrid": true,
    "showlegend": false,
    "tickfont": {
      "family": "Segoe UI",
      "size": 12,
      "color": "#1f77b4"
    }
  },
  "height": 833,
  "width": 933,
  "autosize": true
}

This layout shows different y-axis names but the rest are the same as the plot posted above. As for the data, I am plotting data the exists beyond the max and min of the x-axis. This makes scrolling the x-axis a bit more continuous (aka less missing data).

Again, the overlapping traces shown in the png above are not visible prior to saving the plot.

Thanks for your help!

**Edit Also, the ranges shown in the layout differ from that of the plot posted. I currently don’t have access to the data right now to post/replicate this plot, but the remainder of the layout options are the same.