Can't change the color of grid and ticks in a line chart to color: white...

[Edward Tilley]

I started with this Chartjs page https://www.chartjs.org/samples/2.6.0/charts/line/multi-axis.html 

I can plot this chart on a (green) colored background, but I can't change the color of the grid nor the legend and axis scales ...

I've followed a dozen tutorials, articles and examples, but I cannot change the grid and other colors to white...

What am I doing wrong here?

    // Chart.defaults._set('global', {

    //   elements: {

    //     line: {

    //       backgroundColor: 'rgb(255, 0, 0)',

    //       borderColor: 'rgb(0, 2550, 0)',

    //     }

    //   }

    // });

    var lineChartData = {

labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

datasets: [{

// label: 'My First dataset',

borderColor: window.chartColors.white,

backgroundColor: window.chartColors.white,

fill: false,

data: [

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor()

],

yAxisID: 'y-axis-1',

}, {

// label: 'My Second dataset',

borderColor: window.chartColors.orange,

backgroundColor: window.chartColors.orange,

fill: false,

data: [

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor(),

randomScalingFactor()

],

yAxisID: 'y-axis-2'

}]

    };

    // var chartOptions = {

    //   legend: {

    //     display: true,

    //     position: 'top',

    //     labels: {

    //       boxWidth: 80,

    //       fontColor: 'white'

    //     }

    //   }

    // };

window.onload = function() {

var ctx = document.getElementById('canvas').getContext('2d');

window.myLine = Chart.Line(ctx, {

data: lineChartData,

options: {

responsive: true,

hoverMode: 'index',

          stacked: false,

          // backgroundColor: 'rgb(255, 0, 0)',

    //       borderColor: 'rgb(0, 2550, 0)',

title: {

            // display: true,

            display: true,

            fontColor: window.chartColors.white,

text: 'Chart.js Line Chart - Multi Axis'

},

          labels: {

            // boxWidth: 80,

            display: true,

            fontColor: window.chartColors.white

          },

          scales: { 

yAxes: [{

type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance

display: true,

              position: 'left',

              // fontColor: 'white',

id: 'y-axis-1'

}, {

type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance

display: true,

              position: 'right',

              // fontColor: 'white',

id: 'y-axis-2',

// grid line settings

gridLines: {

                drawOnChartArea: false, // only want the grid lines for one axis to show up

                backgroundColor: 'rgb(255, 255, 255)',

},

}],

}

}

      });

};

document.getElementById('randomizeData').addEventListener('click', function() {

lineChartData.datasets.forEach(function(dataset) {

dataset.data = dataset.data.map(function() {

return randomScalingFactor();

});

});

window.myLine.update();

});