I'm trying to add a title to the X axis to a Chart.js chart, but when I put the title attribute on the x axis, I get an error Uncaught RangeError: minimumFractionDigits value is out of range, but it doesn't happen if I add a title to the Y axis.
grafica_roi = new Chart($('#grafica_roi'), {
type: 'bar',
data: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
datasets: [{
//label: 'Beneficio obtenido',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
backgroundColor: '#F0A202'
}]
},
options: {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
font: {
size:function(context) {
var width = context.chart.width;
if(width<=320) {
size = 12;
}
else {
if(width>320 && width<600) {
size = 16;
}
else {
size = 20;
}
}
//var size = Math.round(width / 32);
return size;
},
weight: "bold"
}
},
grid: {
display: false
},
title: {
text: 'Ahorro',
display: true
}
},
x: {
beginAtZero: true,
ticks: {
font: {
size:function(context) {
var width = context.chart.width;
if(width<=320) {
size = 12;
}
else {
if(width>320 && width<600) {
size = 16;
}
else {
size = 20;
}
}
//var size = Math.round(width / 32);
return size;
},
weight: "bold"
}
},
grid: {
display: false
},
//this title attribute below causes the problem
title: {
text: 'Años',
display: true
}
}
},
plugins: {
autocolors: false,
legend: {
display: false
},
title: {
display: true,
text: "Retorno de inversión",
font: {
size: 20
}
}
}
}
});
Nevermind, I found the problem. The problem was I was using v3.1 Chart.js, while trying to use settings from v3.5 Chart.js.
I got a similar error when I provided NaN as a min and max in my axes config.
Example :
scales : {
yAxes: {
min: NaN,
max: NaN,
display: true,
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.