Lines on scatter graph not showing up

I have been trying to figure out this issue without opening a ticket for the mean time and have followed all the guides on using plotly.js in typescript and for the most part the plugin works and works well however some of the functionality is just not working the biggest issue is certain lines are not showing up.

When I make a scatter graph all of the data and information is there mostly visible but when the trace mode is just mode: 'lines' the lines do not show up.

and when I change the mode to mode: 'markers'

witch is a decent work around for the problem but I also need to fill: 'tozeroy' that isn't working either.

Currently using;
"plotly.js": "^1.54.1"

Here is the code that is used to generate these graphs

let data: any[] = [{ 
      x: this.plotData.z,
      y: this.plotData.y,
      type: 'scatter',
      mode: 'markers',
      fill: 'tozeroy',
      fillcolor: '#A6CEE3',
      marker: {
        color: 'black',
        size: 3
      }
    }];
    
    let layout: any = {
      title: `Standard Normal Distribution`,
      showlegend: false,
      xaxis: {
        ticks: 'outside',
        zeroline: false,
        showgrid: false
      },
      yaxis: {
        rangemode: 'tozero',
        zeroline: true,
        showline: false,
        showticklabels: false,
        showgrid: false
      },
      annotations: [
         {
           text: Math.round((100*this.Pval/2)*100)/100 + '%',
           x: Math.abs(this.teststat),
           y: 0,
           xref: 'x',
           yref: 'y',
           xshift: 12,
           yshift: -2,
           ax: 2.5,
           ay: 0.1,
           axref: 'x',
           ayref: 'y',
           bordercolor: 'black',
           showarrow: true
         }
      ],
      height: 200,
      margin: {
        l: 0,
        r: 0,
        b: 35,
        t: 50,
        pad: 0
      },
      displaylogo: false
    };

    if(this.mode == 'two') {
      let index: PlotData;
      index = await this.pullData(-Math.abs(this.teststat), '<=');
      data.push({
        x: index.z,
        y: index.y,
        type: 'scatter',
        mode: 'markers',
        fill: 'tozeroy',
        fillcolor: '#1F78B4',
        marker: {
          color: '#1F78B4',
          size: 3
        },
        name: 'P-value',
        hoverinfo: 'name'
      })
      index = await this.pullData(Math.abs(this.teststat), '>=');
      data.push({
        x: index.z,
        y: index.y,
        type: 'scatter',
        mode: 'markers',
        fill: 'tozeroy',
        fillcolor: '#1F78B4',
        marker: {
          color: '#1F78B4',
          size: 3
        },
        name: 'P-value',
        hoverinfo: 'name'
      })
      layout.annotations.push({
        x: -Math.abs(this.teststat),
        y: R.dnorm(this.teststat)/2,
        xshift: -12,
        yshift: -2,
        text: Math.round((100*this.Pval/2) * 100)/100 + '%',
        bordercolor: 'black',
        xref: 'x',
        yref: 'y',
        showarrow: true,
        arrowhead: 2,
        ax: -2.5,
        ay: 0.1,
        axref: 'x',
        ayref: 'y'
      })
      layout.annotations.push({
        x: Math.abs(this.teststat),
        y: R.dnorm(this.teststat)/2,
        xshift: -12,
        yshift: -2,
        text: Math.round((100*this.Pval/2) * 100)/100 + '%',
        bordercolor: 'black',
        xref: 'x',
        yref: 'y',
        showarrow: true,
        arrowhead: 2,
        ax: -2.5,
        ay: 0.1,
        axref: 'x',
        ayref: 'y'
      })
    }

    if(this.mode == 'less') {
      let index: PlotData;
      index = await this.pullData(Math.abs(this.teststat), '<=');
      data.push({
        x: index.z,
        y: index.y,
        type: 'scatter',
        mode: 'markers',
        fill: 'tozeroy',
        fillcolor: '#1F78B4',
        marker: {
          color: '#1F78B4',
          size: 3
        },
        name: 'P-value',
        hoverinfo: 'name'
      })
      layout.annotations.push({
        x: Math.abs(this.teststat),
        y: R.dnorm(this.teststat)/2,
        xshift: -12,
        yshift: -2,
        text: Math.round((100*this.Pval) * 100)/100 + '%',
        bordercolor: 'black',
        xref: 'x',
        yref: 'y',
        showarrow: true,
        arrowhead: 2,
        ax: -2.5,
        ay: 0.1,
        axref: 'x',
        ayref: 'y'
      })
    }

    if(this.mode == 'great'){
      let index: PlotData;
      index = await this.pullData(Math.abs(this.teststat), '>=');
      data.push({
        x: index.z,
        y: index.y,
        type: 'scatter',
        mode: 'markers',
        fill: 'tozeroy',
        fillcolor: '#1F78B4',
        marker: {
          color: '#1F78B4',
          size: 3
        },
        name: 'P-value',
        hoverinfo: 'name'
      })
      layout.annotations.push({
        x: Math.abs(this.teststat),
        y: R.dnorm(this.teststat)/2,
        xshift: -12,
        yshift: -2,
        text: Math.round((100*this.Pval) * 100)/100 + '%',
        bordercolor: 'black',
        xref: 'x',
        yref: 'y',
        showarrow: true,
        arrowhead: 2,
        ax: -2.5,
        ay: 0.1,
        axref: 'x',
        ayref: 'y'
      })
    }

    Plotly.newPlot("distribution", data, layout);

Bắt đầu bằng cách tái hiện báo cáo với plotly.js 1.54.1 cùng dữ liệu phân tán và layout được cung cấp, truyền vào Plotly.newPlot("distribution", data, layout). So sánh cách hiển thị của cùng các trace khi sử dụng mode 'lines' với 'markers', bao gồm fill: 'tozeroy'; được xem là hoàn tất khi các đường và phần tô được hiển thị với cấu hình được báo cáo hoặc vấn đề được thu hẹp thành một điều kiện dữ liệu hoặc layout đã được tài liệu hóa.