[Chartjs]-Can you set seperate colors for different axes in Chart.js?

by

1👍

✅

I think I have solved the problem. As you are trying to change the color of both Y axis values. You need to add fontColor property inside ticks object for the specific yAxes. Then assign any color value you want to fontColor property of ticks object.

Find the changes here

var canvas = document.getElementById('myChart');

var chartData = {
  labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
  datasets: [{
    label: 'Temp F',
    yAxisID: 'F',
    display: true,
    fill: false,
    borderColor: '#ff6384', //red
    data: [100, 96, 84, 76, 69]
  }, {
    //type: 'line',
    label: 'Gravity',
    yAxisID: 'G',
    display: true,
    fill: false,
    borderColor: '#36a2eb', //blue
    data: [1.07, 1.055, 1.020, 1.015, 1.012]
  }]
};

// @ts-ignore
var myChart = new Chart(canvas, {
  type: 'line',
  data: chartData,
  options: {
    title: {
      display: true,
      text: 'Mmm Beer!'
    },
    scales: {
      yAxes: [{
        id: 'F',
        position: 'left',
        ticks: {
          fontColor: '#ff6384', //red
          suggestedMin: 32,
          suggestedMax: 100
        }
      }, {
        id: 'G',
        position: 'right',
        ticks: {
          fontColor: '#36a2eb', //blue
          suggestedMin: 1,
          suggestedMax: 1.1
        },
        gridLines: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
      }]
    }
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
  <canvas class=".content" id="myChart"></canvas>
</div>

Hope, this will help you. Thanks!

Leave a comment