Topic: Line type chart doesn't show up on the web page - Uncaught ReferenceError: Chart is not defined
Please help, I added line-chart, but the web page stays blank. Here is the code (that's exact code from the tutorial):
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="lineChart"></canvas>
<script>
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(105, 0, 132, .2)',
],
borderColor: [
'rgba(200, 99, 132, .7)',
],
borderWidth: 2
},
{
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
backgroundColor: [
'rgba(0, 137, 132, .2)',
],
borderColor: [
'rgba(0, 10, 130, .7)',
],
borderWidth: 2
}
]
},
options: {
responsive: true
}
});
</script>
</body>
</html>
Only after I added link to "chart.js" the one that comes with the kit, then it worked. Please tell my why is it so. I thought that all the files (in the kit) including those in /js/module/ folder should be connected.Another thing, is the sequence of those three elements. They work only if they go in this order:
- Canvas
- Connection to /chart.js
- Code from the tutorial.
If you change the order, the chart will not appear, and it will cause "Chart is not defined". What am I doing wrong?
Hi sergeysh,
Chart.js is the part of our mdb.js package for sure. You can test it in our snippets environment that uses only core items of mdb package pro/free. I copied exactly your code: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/986884
You need to check if you do everything according to the tutorial in terms of package usage. The order that you used is correct. You need a canvas to draw a chart on it and you need to initiate a chart that already was defined.
If you need additional help I am here for you.
Best Regards, Piotr
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.4
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No