I used following code in Chart 2.2.1 and it worked well and we can see label Time
.
Now we want to upgrade to 3.6.0 due to security reasons, but snippet stopped working. I attach 2 fiddles
Working 2.2.1: https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
Not working 3.6.0: https://jsfiddle.net/maksim_beliaev/q2poncyd/5/
How can I set label for X and Y axis with new chartjs? In online docs for Axis and Labels looks like that syntax should be correct
JavaScript
x
91
91
1
function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
2
new Chart(ctx, {
3
type: 'line',
4
data: {
5
labels: x_axis,
6
type: 'line',
7
defaultFontFamily: 'Montserrat',
8
datasets: [{
9
label: version_1,
10
data: y_axis_1,
11
backgroundColor: 'transparent',
12
borderColor: 'rgba(220,53,69,0.75)',
13
borderWidth: 3,
14
pointStyle: 'circle',
15
pointRadius: 5,
16
pointBorderColor: 'transparent',
17
pointBackgroundColor: 'rgba(220,53,69,0.75)',
18
}, {
19
label: version_2,
20
data: y_axis_2,
21
backgroundColor: 'transparent',
22
borderColor: 'rgba(40,167,69,0.75)',
23
borderWidth: 3,
24
pointStyle: 'circle',
25
pointRadius: 5,
26
pointBorderColor: 'transparent',
27
pointBackgroundColor: 'rgba(40,167,69,0.75)',
28
}]
29
},
30
options: {
31
responsive: true,
32
33
tooltips: {
34
mode: 'index',
35
titleFontSize: 12,
36
titleFontColor: '#000',
37
bodyFontColor: '#000',
38
backgroundColor: '#fff',
39
titleFontFamily: 'Montserrat',
40
bodyFontFamily: 'Montserrat',
41
cornerRadius: 3,
42
intersect: false,
43
},
44
legend: {
45
display: false,
46
labels: {
47
usePointStyle: true,
48
fontFamily: 'Montserrat',
49
},
50
},
51
scales: {
52
xAxes: [{
53
display: true,
54
gridLines: {
55
display: false,
56
drawBorder: false
57
},
58
scaleLabel: {
59
display: true,
60
labelString: 'Time'
61
}
62
}],
63
yAxes: [{
64
display: true,
65
gridLines: {
66
display: false,
67
drawBorder: false
68
},
69
scaleLabel: {
70
display: true,
71
labelString: 'Value'
72
}
73
}]
74
},
75
title: {
76
display: false,
77
text: 'Normal Legend'
78
}
79
}
80
});
81
}
82
83
var ctx = document.getElementById( "canvas" );
84
ctx.height = 150;
85
create_line_chart(ctx, [2010, 2011, 2012, 2013, 2014, 2015, 2016],
86
194,
87
[0, 30, 10, 120, 50, 63, 10],
88
221,
89
[0, 50, 40, 80, 40, 79, 120],
90
);
91
Advertisement
Answer
Chart.js v3 has lots of API changes from Chart.js v2, you should pass your title configuration like this:
JavaScript
1
21
21
1
const titleConfig = {
2
scales: {
3
x: {
4
display: true,
5
title: {
6
display: true,
7
text: "Time",
8
padding: { top: 20, left: 0, right: 0, bottom: 0 },
9
},
10
},
11
y: {
12
display: true,
13
title: {
14
display: true,
15
text: "Value",
16
padding: { top: 30, left: 0, right: 0, bottom: 0 },
17
},
18
},
19
},
20
};
21
More information on how to use title configuration can be found on the documentation.
Here’s a working fiddle: https://jsfiddle.net/vkghzxLc/15/