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>
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
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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