Change X and Y axis font color

Question

How can I change the color of the X and Y axes labels? I was trying to use fontColor within scaleLabel but I might be doing it in the wrong place ?

I tried applying it within scale as can be found on the source code. I also tried under scales and even within xAxes.

var options = { type: 'bar',     data: {         labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],         datasets: [{             label: '# of Votes',             data: [12, 19, 3, 5, 2, 3],             backgroundColor: 'red',             borderWidth: 1         }]     },     options: {         scale: {             scaleLabel:{                 fontColor: 'red'             }         },         scales: {             yAxes: [{                 ticks: {                     beginAtZero:true                 }             }]         }     }  }; 

Reproduction online

I've been checking the documentation but it doesn't seem to be very clear to me. And as chart.js doesn't provide enough examples, it is not easy to find out things sometimes...

Answer 1

$(function(){  var ctx = document.getElementById("myChart");  //Chart.defaults.global.defaultFontColor='red';  var myChart = new Chart(ctx, {      type: 'bar',      data: {          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],          datasets: [{              label: '# of Votes',              data: [12, 19, 3, 5, 2, 3],              backgroundColor: [                  'rgba(255, 99, 132, 0.2)',                  'rgba(54, 162, 235, 0.2)',                  'rgba(255, 206, 86, 0.2)',                  'rgba(75, 192, 192, 0.2)',                  'rgba(153, 102, 255, 0.2)',                  'rgba(255, 159, 64, 0.2)'              ],              borderColor: [                  'rgba(255,99,132,1)',                  'rgba(54, 162, 235, 1)',                  'rgba(255, 206, 86, 1)',                  'rgba(75, 192, 192, 1)',                  'rgba(153, 102, 255, 1)',                  'rgba(255, 159, 64, 1)'              ],              borderWidth: 1          }]      },      options: {         legend:{labels: {fontColor: 'orange'}},        title: {              display: true,              fontColor: 'blue',              text: 'Custom Chart Title'          },          scales: {              yAxes: [{                  ticks: {                      beginAtZero:true,                      fontColor: 'red'                  },              }],            xAxes: [{                  ticks: {                      fontColor: 'green'                  },              }]          }                 }  });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>  <canvas id="myChart" width="400" height="400"></canvas>

You can use fontColor inside ticks/label/legend:labels for a particular axis,

options: {         legend: {              labels: {                   fontColor: 'orange'                  }               },         title: {             display: true,             fontColor: 'blue',             text: 'Custom Chart Title'         }     ,         scales: {             yAxes: [{                 ticks: {                     beginAtZero:true,                     fontColor: 'red'                 },             }],           xAxes: [{                 ticks: {                     fontColor: 'green'                 },             }]         }       } 

or change the defaultFontColor to change font color of entire text elements drawn on the canvas.

 Chart.defaults.global.defaultFontColor='red';