1

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>

3
  • @Adnan, thx for the edit. I didn't know you could put runnable snippets directly in the question. Apr 2, 2019 at 19:18
  • My pleasure! It's a new feature of Stackoverflow to add runnable code snippet. However, I don't understand what you are trying to do. Do you want to change the color of the grid-lines? Apr 2, 2019 at 19:23
  • @AdnanSharif I'm trying to change the colors on the scale labels on the left & right yAxes. For example, have the temp values on left axis in red and the SG values on the right axis in blue. Apr 2, 2019 at 19:28

1 Answer 1

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!

2
  • Bingo! I'm curious: did you find this documented somewhere, or did you just experiment with it? Apr 2, 2019 at 20:19
  • It is documented here Apr 2, 2019 at 20:30

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.