How to change the x axis color in Chart.js?

@lyda.dickens 

To change the color of the x-axis in a Chart.js chart, you can use the scaleLabel option in the scales object of your chart configuration. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var chart = new Chart(ctx, {
  type: 'line',
  data: {
    // Your data here
  },
  options: {
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'X-axis label',
          fontColor: '#ff0000'  // Red x-axis label
        }
      }]
    }
  }
});

This will display an x-axis label with the text "X-axis label" in red color. Note that you can also customize other aspects of the x-axis label, such as the font size and font family, using the fontSize and fontStyle options.

If you want to change the color of the x-axis itself (i.e., the line and ticks), you can use the color and tickColor options in the xAxes array of the scales object. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var chart = new Chart(ctx, {
  type: 'line',
  data: {
    // Your data here
  },
  options: {
    scales: {
      xAxes: [{
        color: '#ff0000',  // Red x-axis
        tickColor: '#00ff00'  // Green x-axis ticks
      }]
    }
  }
});

This will create a red x-axis with green tick marks.

@lyda.dickens 

Please note that the options and configuration provided above may vary depending on the version of Chart.js you are using. Refer to the official Chart.js documentation for more information and specific details on how to customize your chart.