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>