How to create a filled area without borders or overlap

plotly.js
1

How can I get the following plot without the bottom line being drawn? My attempts have either led the filled area to be drawn incorrectly on the bottom border or to be not drawn at all:

var trace1 = {
  x: [1, 2, 3, 4],
  y: [0, 0, 5, 5],
  type: 'scatter',
  mode: 'lines',
  line:{shape:'hv'}
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [11, 12, 13, 14],
  fill: 'tonexty',
  type: 'scatter',
  mode: 'none',
  line:{shape:'hv'}
};

var layout = {
  title: 'Overlaid Chart Without Boundary Lines'
};

var data = [trace1, trace2];

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

I found a solution by looking at the output of R’s ggplotly() with geom_ribbon(). It still draws the bottom line, but with with the line color set to “transparent”. Seems a bit hacky, but I guess it works.