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
JavaScript
x
39
39
1
var xValues = ['6 am','8 am','10 am','12 pm','2 pm','4 pm','6 pm','8 pm','10 pm','12 am'];
2
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
3
4
new Chart("myChart", {
5
type: "line",
6
data: {
7
labels: xValues,
8
datasets: [{
9
fill: false,
10
lineTension: 0,
11
backgroundColor: "white",
12
borderColor: "white",
13
data: yValues,
14
}]
15
},
16
options: {
17
legend: {display: false},
18
scales: {
19
xAxes: [{
20
gridLines: {
21
color: 'white',
22
zeroLineColor: 'white',
23
}}],
24
yAxes: [
25
{ticks: {
26
min: 6,
27
max:16,
28
},
29
color: 'white',
30
},
31
{gridLines: {
32
color: 'white', //give the needful color
33
zeroLineColor: 'white',
34
}},
35
],
36
}
37
}
38
});
39
Advertisement
Answer
Because you have two axes defined for yAxes
. Using proper indentation helps notice these:
JavaScript
1
16
16
1
yAxes: [
2
{
3
ticks: {
4
min: 6,
5
max:16,
6
},
7
color: 'white',
8
},
9
{
10
gridLines: {
11
color: 'white', //give the needful color
12
zeroLineColor: 'white',
13
}
14
},
15
],
16
See how after color
you close the object and start another. Put them as one object and you won’t have two axes:
JavaScript
1
14
14
1
yAxes: [
2
{
3
ticks: {
4
min: 6,
5
max:16,
6
},
7
color: 'white',
8
gridLines: {
9
color: 'white', //give the needful color
10
zeroLineColor: 'white',
11
}
12
},
13
],
14