I want to lazy load charts generated by Chart.js. Unfortunately, when I’m loading the plugin I’m getting:
Uncaught TypeError: Cannot read property 'plugins' of undefined"
I’m using
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2/dist/chartjs-plugin-deferred.min.js"></script>
and
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script>
Here’s a minimal fiddle that illustrates the error https://jsfiddle.net/aqgst865/
Is there any way to fix this error or an alternative to lazy load Chart.js charts?
Advertisement
Answer
The deffered plugin is not compatible with version 3 of chart.js. To fix your error you will have to downgrade to version 2.9.4
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2/dist/chartjs-plugin-deferred.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="chartcontainer">
<div class="mx-auto max-w-md">
<canvas id="A" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("A").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
datasets: [{
label: "Search interest",
fill: true,
data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
borderColor: 'rgba(55,48,163,0.8)',
backgroundColor: 'rgba(55,48,163,0.5)',
pointHoverRadius: 10
}]
},
options: {
animation: {
duration: 0
},
plugins: {
legend: {
display: false,
positon: "bottom"
},
deferred: {
}
},
elements: {
point: {
radius: 2
}
},
scales: {
y: {
beginAtZero: true,
display: false,
max: 100
},
x: {
display: false,
position: "bottom"
}
}
}
});
</script>
</div>
<div class="mx-auto max-w-md">
<canvas id="B" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("B").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
datasets: [{
label: "Search interest",
fill: true,
data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
borderColor: 'rgba(55,48,163,0.8)',
backgroundColor: 'rgba(55,48,163,0.5)',
pointHoverRadius: 10
}]
},
options: {
plugins: {
legend: {
display: false,
positon: "bottom"
},
deferred: {
}
},
elements: {
point: {
radius: 2
}
},
scales: {
y: {
beginAtZero: true,
display: false,
max: 100
},
x: {
display: false,
position: "bottom"
}
}
}
});
</script>
<div class="mx-auto max-w-md">
<canvas id="C" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("C").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
datasets: [{
label: "Search interest",
fill: true,
data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
borderColor: 'rgba(55,48,163,0.8)',
backgroundColor: 'rgba(55,48,163,0.5)',
pointHoverRadius: 10
}]
},
options: {
plugins: {
legend: {
display: false,
positon: "bottom"
},
deferred: {
}
},
elements: {
point: {
radius: 2
}
},
scales: {
y: {
beginAtZero: true,
display: false,
max: 100
},
x: {
display: false,
position: "bottom"
}
}
}
});
</script>
<div class="mx-auto max-w-md">
<canvas id="D" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("D").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
datasets: [{
label: "Search interest",
fill: true,
data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
borderColor: 'rgba(55,48,163,0.8)',
backgroundColor: 'rgba(55,48,163,0.5)',
pointHoverRadius: 10
}]
},
options: {
plugins: {
legend: {
display: false,
positon: "bottom"
},
deferred: {
}
},
elements: {
point: {
radius: 2
}
},
scales: {
y: {
beginAtZero: true,
display: false,
max: 100
},
x: {
display: false,
position: "bottom"
}
}
}
});
</script>
</body>EDIT:
With the release of version 2 of the deferred plugin it is compatible with chart.js V3