I'm using chart.js to build a line graph. I can't figure out why there are two y-axes on my graph. I also tried changing the color of the tick labels to white but it isn't working either. Thanks for your help! Here's the preview of my code: https://codepen.io/suminohh/pen/vYROrEx
var xValues = ['6 am','8 am','10 am','12 pm','2 pm','4 pm','6 pm','8 pm','10 pm','12 am'];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "white",
borderColor: "white",
data: yValues,
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
gridLines: {
color: 'white',
zeroLineColor: 'white',
}}],
yAxes: [
{ticks: {
min: 6,
max:16,
},
color: 'white',
},
{gridLines: {
color: 'white', //give the needful color
zeroLineColor: 'white',
}},
],
}
}
});
Because you have two axes defined for yAxes. Using proper indentation helps notice these:
yAxes: [
{
ticks: {
min: 6,
max:16,
},
color: 'white',
},
{
gridLines: {
color: 'white', //give the needful color
zeroLineColor: 'white',
}
},
],
See how after color you close the object and start another. Put them as one object and you won’t have two axes:
yAxes: [
{
ticks: {
min: 6,
max:16,
},
color: 'white',
gridLines: {
color: 'white', //give the needful color
zeroLineColor: 'white',
}
},
],