Set Axis Label Color in ChartJS

 https://masteringjs.io/tutorials/chartjs/axis-label-color

https://stackoverflow.com/questions/35383677/change-color-of-x-and-y-axis-values-in-chart-js

Okay, so I figured it out. It's the ticks property I'm looking for...see code below.

See updated jsfiddle: https://jsfiddle.net/o534w6jj/1/

var ctx = $("#weekly-clicks-chart");
var weeklyClicksChart = new Chart(ctx, {
    type: 'line',
    data: data,
    scaleFontColor: 'red',
    options: {
            scaleFontColor: 'red',
        responsive: true,
        tooltips: {
            mode: 'single',
        },
        scales: {
            xAxes: [{ 
                gridLines: {
                    display: false,
                },
                ticks: {
                  fontColor: "#CCC", // this here
                },
            }],
            yAxes: [{
                display: false,
                gridLines: {
                    display: false,
                },
            }],
        }
    }         
});

With ChartJS 3, you can change the color of the labels by setting the scales.x.ticks.color and scales.y.ticks.color options. For example, below is how you can make the Y axis labels green and the X axis labels red.

Note that the below doesn't work in ChartJS 2.x, you need to use ChartJS 3.

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',
    data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        label: 'Example Data',
        data: [12, 19, 3, 5, 2, 3],
    }]
  },
  // Configuration options go here
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: { color: 'green', beginAtZero: true }
      },
      x: {
        ticks: { color: 'red', beginAtZero: true }
      }
    }
  }
});

Below is a live example.

You can use any color format supported by ChartJS, including hex codes. For example, below is an alternative approach for setting the Y axis ticks to red and X axis ticks to green.

options: {
  responsive: true,
  scales: {
    y: {
      ticks: { color: '#00ff00', beginAtZero: true }
    },
    x: {
      ticks: { color: '#ff0000', beginAtZero: true }
    }
  }
}