Visual artefacts on filled area plot + wrong axis on... | plotly/plotly.js

Nobody has claimed this yet.

Hello!

I've found a (two?) bug(s) while trying to visualize a filled area around a line!
I tested two approaches, one with stackgroups

https://jsfiddle.net/tuzqayeo/

var data = [
    {
      "x": [
        1,2,3,4,5,6,7,8
      ],
      "y": [
        -7.9697220089372856, -2.627365584280772, 7.593901896848809,
        7.593901896848809, 8.368216650109318, 36.78414802092127,
        53.936836616548824, 290.74225043249953
      ],
      "name": "1",
      "marker": { "color": "rgb(0,128,255)" },
      stackgroup: 'one',
      type: "scatter"
    },
    {
      "x": [
         1,2,3,4,5,6,7,8
      ],
      "y": [
        -12.176146295932956, -6.236001952326675, 3.815685614756825,3.815685614756825, 3.420446004767763, 19.39126823156141, 26.148107026147827, -75.03836092933072
      ],
      "name": "2",
      "marker": { "color": "rgb(0,128,255)" },
      stackgroup: 'one',
      fillcolor: "rgba(255,255,255,0)",
      type: "scatter"
    },
    {
      "x": [
         1,2,3,4,5,6,7,8
      ],
      "y": [
        -10.097532455267322, -4.448717940300206, 5.687911765670939,
        5.687911765670939, 5.86543013985068, 27.792147279053925,
        39.35149995881291, -1.239851028073491
      ],
      "name": "3",
      "marker": { "color": "rgb(0,128,255)" },
      "type": "scatter",
    }
  ];

var layout = {}

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

and one with a fill->toself line that wraps around itself:

https://jsfiddle.net/qocs8nxz/

var data = [
   {
      "x": [
         1,2,3,4,5,6,7,8,8,7,6,5,4,3,2,1
      ],
      "y": [
        -7.9697220089372856, -2.627365584280772, 7.593901896848809,
        7.593901896848809, 8.368216650109318, 36.78414802092127,
        53.936836616548824, 290.74225043249953, -75.03836092933072,
        26.148107026147827, 19.39126823156141, 3.420446004767763,
        3.815685614756825, 3.815685614756825, -6.236001952326675,
        -12.176146295932956
      ],
      "name": "1-2",
      "marker": { "color": "rgba(255,255,255,0)" },
      "type": "scatter",
      "fill": "toself",
      "fillcolor": "rgba(0,100,80,0.2)",
    },
    {
      "x": [
         1,2,3,4,5,6,7,8
      ],
      "y": [
        -10.097532455267322, -4.448717940300206, 5.687911765670939,
        5.687911765670939, 5.86543013985068, 27.792147279053925,
        39.35149995881291, -1.239851028073491
      ],
      "name": "3",
      "marker": { "color": "rgb(0,128,255)" },
      "type": "scatter",
    }
  ];

var layout = {}

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

in both cases the HTML is simply

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"></div>
</body>

What I obtain in both cases is a visual artefact on the bottom at the start of the graph, the single line appears teared!
(in the first example there's also an issue of scale on the same y axis for the stacked group and the single line, where -75 is above -1 🤔)

It appears to be linked to the range of the graph since if I zoom vertically on a portion of the graph the issue disappear and even if I substitute the ~290 in each plot with like ~90 (so effectively decreasing the y range of the autorange plot) the issue disappear.

Let me know if more details are needed, any help is appreciated.
Screenshot 2021-11-20 at 18 40 34

and with the scale reduced:
Screenshot 2021-11-20 at 18 41 40

Reproduce both supplied jsfiddle cases through Plotly.newPlot, first checking the filled-area artefact and then the stackgroup axis scale. Compare behavior with vertical zooming and reduced values as described. Done means the artefacts are gone and the stacked group and single line share the correct y-axis scale across the reported ranges.

Written by the indexing model from the issue text.

Visual artefacts on filled area plot + wrong axis on stackgroup

Description

Contributor guide

First steps

Research direction

Assessment