Chart.js label color

Question

I'm using chart.js to create a bar chart and can't seem to change the label colors or the legend colors. I figured out how to change the tick colors, but I'm not sure where to put the 'scaleFontColor', if that is indeed what I need to be using.

Here is a link to what it looks like now. http://imgur.com/nxaH1mk

And here is my code:

var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {     scaleFontColor: "white",     type: "bar",     data: {         labels: <?php echo json_encode($timeSlice); ?>,          datasets: [{             label: "A Label",             backgroundColor: "rgba(159,170,174,0.8)",             borderWidth: 1,             hoverBackgroundColor: "rgba(232,105,90,0.8)",             hoverBorderColor: "orange",             scaleStepWidth: 1,             data: <?php echo json_encode($myCount); ?>         }]     },     options: {         legend: {             fontColor: "white"         },         scales: {              yAxes: [{                 ticks: {                     fontColor: "white",                     stepSize: 1,                     beginAtZero: true                 }             }]         }     } }); 

Any help would be greatly appreciated.

Answer 1

Guh I solved it, sorry about the question. But I guess I'll leave an answer in case anyone else runs into my problem.

var ctx = document.getElementById("barChart");     var myChart = new Chart(ctx, {         type: "bar",         data: {             labels: ["label 1", "label 2"],              datasets: [{                 label: "My Label",                 backgroundColor: "rgba(159,170,174,0.8)",                 borderWidth: 1,                 hoverBackgroundColor: "rgba(232,105,90,0.8)",                 hoverBorderColor: "orange",                 scaleStepWidth: 1,                   data: [4, 5]             }]         },         options: {              legend: {                 labels: {                     fontColor: "blue",                     fontSize: 18                 }             },             scales: {                 yAxes: [{                     ticks: {                         fontColor: "green",                         fontSize: 18,                         stepSize: 1,                         beginAtZero: true                     }                 }],                 xAxes: [{                     ticks: {                         fontColor: "purple",                         fontSize: 14,                         stepSize: 1,                         beginAtZero: true                     }                 }]             }         }     });

   <!-- Edit:    chart.js recently released new version v3.x    which is not backwards compatible with v2.x    -->  <!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->     <!-- above link gets you latest version of chart.js (at v3.3.2 now)         hence snippet didn't work propperly anymore :-(    -->  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>     <!-- above link gets you v2.9.4         and snippet works agian  :-)    -->  <div>     <canvas id="barChart" height="140"></canvas> </div>

Answer 2

Good question and good answer from @PhantomSalt

His answer works perfectly well with ....... chart.js v2.xx
I modified his good code to work with .. chart.js v3.xx

(v3.xx is not backwards compatible with v2.xx)

// var ctx = document.getElementById("barChart") const ctx = document.getElementById("barChart").getContext("2d"); // added '.getContext("2d")'  const myChart = new Chart(ctx, {   type: "bar",   data: {     labels: ["label 1", "label 2"],     datasets: [{       label: "My Label",       backgroundColor: "rgba(159,170,174,0.8)",       borderWidth: 1,       hoverBackgroundColor: "rgba(232,105,90,0.8)",       hoverBorderColor: "orange",       scaleStepWidth: 1,       data: [4, 5]     }]   },   options: {     plugins: {  // 'legend' now within object 'plugins {}'       legend: {         labels: {           color: "blue",  // not 'fontColor:' anymore           // fontSize: 18  // not 'fontSize:' anymore           font: {             size: 18 // 'size' now within object 'font {}'           }         }       }     },     scales: {       y: {  // not 'yAxes: [{' anymore (not an array anymore)         ticks: {           color: "green", // not 'fontColor:' anymore           // fontSize: 18,           font: {             size: 18, // 'size' now within object 'font {}'           },           stepSize: 1,           beginAtZero: true         }       },       x: {  // not 'xAxes: [{' anymore (not an array anymore)         ticks: {           color: "purple",  // not 'fontColor:' anymore           //fontSize: 14,           font: {             size: 14 // 'size' now within object 'font {}'           },           stepSize: 1,           beginAtZero: true         }       }     }   } });

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>   <!-- gets you the latest version of Chart.js, now at v3.3.2 -->  <div>   <canvas id="barChart" height="140"></canvas> </div>