Невозможно изменить цвет сетки js и условных обозначений в линейном графике - на цвет: белый

Question

Я начал с этой диаграммы js страница https://www.chartjs.org/samples/2.6.0/charts/line/multi-axis.html

Я могу построить эту диаграмму на (зеленом) цветном фоне, но не могу изменить цвет сетка, легенды и шкалы осей ...

[green chart.png] [] 1

Я следил за дюжиной учебников, статей и примеры, но я не могу изменить сетку и другие цвета на белый ... chart js color debug.png

Что я делаю неправильно здесь?

    // 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

отображение экземпляра: true, позиция: 'left', // fontColor: 'white', id: 'y-axis-1'}, {type: 'linear' , // только линейный, но допускает регистрацию типа шкалы. Это позволяет расширениям существовать исключительно для масштаба журнала, например: 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();
      });