javascript - Can you set seperate colors for different axes in Chart.js?

Question

I've got a simple chart.js chart with dual axes. To improve readability, I'd like to color coordinate the chart & scale data. Is this possible?

For example, in my sample below, I'd like to have the temp values on left axis shown in red and the SG values on the right axis shown in blue.

I've tried adding fontColor and scaleFontColor options under the specific axis options, but no luck.

Here is my code:

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]
  }]
};

var myChart = new Chart(canvas, {
  type: 'line',
  data: chartData,
  options: {
    title: {
      display: true,
      text: 'Mmm Beer!'
    },
    scales: {
      yAxes: [{
        id: 'F',
        position: 'left',
        scaleFontColor: '#ff6384', //red
        ticks: {
          suggestedMin: 32,
          suggestedMax: 100
        }
      }, {
        id: 'G',
        position: 'right',
        ticks: {
          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 id="myChart"></canvas>
</div>

标签： javascriptchart.js

Answer 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!