更改标签颜色Y和X轴chart.js

Question

I have tried to change to change the chart label colour to white for the Y and X axis. I tried to add the code with fontColour from other threads here on stackoverflow but won't get it to work.

Here is my code:

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    maintainAspectRatio: false,
    legend: {
      fontColor: "white",
    },
    scales: {
      xAxes: [{
        ticks: {
          fontColor: "white",
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: "white",
          beginAtZero: true,
          maxTicksLimit: 5,
          stepSize: Math.ceil(250 / 5),
          max: 250
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: {
      responsive: true
    }
  });

Answer 1

You need to assign the options object to options property, when constructing the chart.

 var randomScalingFactor = function() { return Math.round(Math.random() * 100) }; var lineChartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', fontColor: '#fff', backgroundColor: 'rgba(220,220,220,0.2)', borderColor: 'rgba(220,220,220,1)', pointBackgroundColor: 'rgba(220,220,220,1)', pointBorderColor: '#fff', data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }] } var options = { responsive: true, maintainAspectRatio: false, legend: { fontColor: "white", }, scales: { xAxes: [{ ticks: { fontColor: "white", } }], yAxes: [{ ticks: { fontColor: "white", beginAtZero: true, maxTicksLimit: 5, stepSize: Math.ceil(250 / 5), max: 250 } }] } }; var ctx = document.getElementById('canvas-1'); var chart = new Chart(ctx, { type: 'line', data: lineChartData, options: options //<- assign this }); 

 canvas { background: #111 } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="canvas-1"></canvas>