I am following a Youtube tutorial on chart.js (https://www.youtube.com/watch?v=sE08f4iuOhA 9:05 point of error on my code) when they look at their webpage with the graph it shows up with no errors, however when I attempt to recreate this, I run into "Uncaught TypeError: Chart is not a Constructor". I'm not sure where I went wrong here.
I've tried changing var to let, adding dimensions on the canvas tag, and reverting the Chart.js version to a lower, possibly more stable version as many forum posts have recommended but to no avail I keep running into this this issue and it is leading me to believe its an over looked error in my code. Which is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Graph</title>
</head>
<body>
<div class="container">
<canvas id="myChart" width="600" height="600"></canvas>
</div>
<script>
let Chart = document.getElementById('myChart').getContext('2d');
let line = new Chart(myChart, {
type:'line',
data:{
labels:[],
datasets:[
1,
2,
3,
4,
5,
99,
],
},
options:{}
});
</script>
</body>
</html>
This is the second tutorial I've run into this issue on, I was following the chart.js Getting Started guide but my chart was not appearing (assuming same issue or similar, I didn't think of f12 debug (embarrassingly until the seconds time I had the issue) ), so I moved to a video tutorial only to run into my chart not appearing again. I'm trying to learn how to using graphs this way for a project at school and its beginning to be very frustrating.
I am running this on Flask Server on a Raspberry Pi.
I am hoping someone can provide some insight on what I'm doing wrong (I am very new to webpage building)!
Cheers!
There's a name clash in your code. You defined a variable Chart, which is also the name of the main class from Chart.js. You could rename your variable to ctx for example.
Also, data.labels should have the same number of entries as data.datasets.data. Further keep in mind that data.datasets is an array of objects. Additional information is available here.
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
data: [1, 2, 3, 4, 5, 99]
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart"></canvas>