I am having an issue getting my y axis to start from 0.
I am importing ChartJS v4 as follows:
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
And my chart script is below:
<script>
new Chart(document.getElementById("line-chart"), {
type : 'line',
data : {
labels : ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
datasets : [
{
data : [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
label : "Temperature",
borderColor : "#3cba9f",
fill : false
}]
},
options : {
scales: {
y: {
min: 0,
max: 100
}
},
title : {
display : true,
text : 'Elderberry Brew Temperature Over Time'
}
}
});</script>
The documentation shows this positioning for the options and the same syntax for the scale options. :
https://www.chartjs.org/docs/latest/axes/
I have seen many similar questions but all for older ChartJS library versions
Any help hugely appreciated!
you can view the graph in context at:
I tested this code. I hope this will help :
<!DOCTYPE html>
<html>
<head>
<title>Chart.js Example</title>
<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<canvas id="line-chart"></canvas>
</div>
<script>
// Data and Chart Configuration
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
datasets: [
{
data: [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
label: "Temperature",
borderColor: "#3cba9f",
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true, // Set this to true to start the Y-axis at 0
max: 100
},
x: {
// If you want to configure the X-axis, you can do it here
}
},
title: {
display: true,
text: 'Elderberry Brew Temperature Over Time'
}
}
});
</script>
</body>
</html>