[Chartjs]-Change label color Y and X axis chart.js

by

4👍

✅

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>

Leave a comment