y = 0 Gitternetz (oder Achse?) Nicht in chart.js

Question

Ich kann nicht herausfinden, wie man die Y-Achse (oder vielleicht ist es nur eine Rasterlinie), um mit chart.js zu zeigen. Hier ist ein Screenshot des Diagramms:

Chart.js screenshot with missing gridline/axis at y=0

Ich habe versucht, die Frage auf dieser Seite zu erforschen, aber nicht alles, was nützlich finden kann. Wenn ich etwas übersehen habe, lass es mich wissen! Ich schätze jede Hilfe.

Und hier ist mein Code:

$.ajax({ 
method: "GET", 
url: endpoint, 
success: function(data){ 
    labels = data.labels 
    defaultData = data.default 
    sp500roidca = data.sp500dca 
    console.log(data) 
    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'line',   
     data: { 
      labels: labels, 
      datasets: [{ 
       label: 'ROI (%)', 
       data: defaultData, 
       borderColor: 'white',  
      }, 
      { 
       label: 'DCA SP500 ROI (%)', 
       data: sp500roidca, 
       borderColor: '#00EE76', 
      }],  
     }, 
     options:{  
      elements:{ 
       point:{ 
        radius: 1 
       } 
      }, 
      scales: { 
       yAxes: [{ 
        display: true, 
        gridLines: { 
         color: 'gray' 
        } 
       }], 
       xAxes: [{ 
        display: true, 
        gridLines: { 
         color: 'gray', 
        } 
       }] 
      },    

      legend: { 
       position: 'top', 
       labels: { 
        fontColor: 'white' 
       } 
      }, 
     } 
    }) 

Answer 1

Es stellt sich die schwarzen Hintergrund heraus versteckte die Nullachse Farbe. Ich habe es behoben, indem ich die ZeroLineColor: 'white' Option unter Skalen unter yAxes wie folgt hinzugefügt habe:

scales: { 
       yAxes: [{ 
        display: true, 
        gridLines: { 
         color: 'gray', 
         zeroLineColor: 'white' 
        } 
       }],