I have an HTML page with a charts.js chart that works. I'm trying to set the minimum and maximum values of the chart, but I can't set the minimum and maximum values. I searched different posts but they all say the same, and I'm pretty sure I'm already doing that...
> scales: {
> yAxes: [{
> ticks: {
> min: -100,
> max: 100
> }
> }]
> }
I just cant figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
<title>daily</title>
</head>
<body>
<canvas class='temp_chart' id='temp_chart'>
</body>
<script>
function square_data(chart){
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFA500";
ctx.rect(145, 70, 15, 15);
ctx.fill()
ctx.fillStyle = "#fff";
ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10);
ctx.stroke();
return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
window.chart = new Chart(ctx, {
type: 'line',
data: {
labels: time_of_day,
datasets: [{
fill:false,
label: 'Cantidad Estudiantes',
data: temperatures,
borderColor: [
'rgba(0, 0, 0, 1)',
],
borderWidth: 3
}]
},
options: {
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'start',
align: '-45',
clamp: true,
color: "orange",
}
},
elements:{
"point":{"pointStyle":square_data},
}
},
scales: {
yAxes: [{
ticks: {
min: -100,
max: 100
}
}]
}
});
</script>That is because you are using v2 syntax with v3, for all changes please read the migration guide and you defined the scale config outside of the options object.
In v3 all scales are an object where the key of the object is the ID of the scale
Also for the datalabels plugin to work you need to register it, see first line in the script block.
Last thing dont include 2 major versions of a lib, high chance of giving errors
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<title>daily</title>
</head>
<body>
<canvas class='temp_chart' id='temp_chart'>
</body>
<script>
Chart.register(ChartDataLabels); // Added this line
function square_data(chart) {
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFA500";
ctx.rect(145, 70, 15, 15);
ctx.fill()
ctx.fillStyle = "#fff";
ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10);
ctx.stroke();
return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
window.chart = new Chart(ctx, {
type: 'line',
data: {
labels: time_of_day,
datasets: [{
fill: false,
label: 'Cantidad Estudiantes',
data: temperatures,
borderColor: [
'rgba(0, 0, 0, 1)',
],
borderWidth: 3
}]
},
options: {
// Changed this block
scales: {
y: {
min: -100,
max: 100,
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'start',
align: '-45',
clamp: true,
color: "orange",
}
},
elements: {
"point": {
"pointStyle": square_data
},
}
},
});
</script>