Cannot read properties of undefined (reading 'handleEvent') #12032
Description
Closing due to lack of test case
Originally posted by @etimberg in #9778
I cannot reopen that issue, however I am getting the same when I attempt to do what OP was trying to do. Here is a standalone to reproduce.
Click on one of the bar graphs and you will see the error pop up. Seems to be something to do with the legend. Tried disabling the legend, etc. No change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
max-width: 600px;
margin-top: 20px;
}
#backButton {
margin-top: 10px;
padding: 10px 15px;
font-size: 16px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
}
#backButton:hover {
background-color: #0056b3;
}
#backButton:disabled {
background-color: #81beff;
}
</style>
</head>
<body>
<h2>Expandable Bar Chart</h2>
<canvas id="expenseChart"></canvas>
<button disabled id="backButton">Back</button>
<script>
const data = {
root: {
type: 'bar',
data: {
labels: ['Team 1', 'Team 2', 'Team 3', 'Team 4'],
datasets: [
{
label: 'Total Expenses',
backgroundColor: ['red', 'red', 'red', 'red'],
data: [4000, 5000, 3000, 6000],
},
],
},
},
'Team 1': {
type: 'pie',
data: {
labels: ['Matt', 'Cory', 'Jim'],
datasets: [
{
label: 'Team 1',
backgroundColor: ['red', 'red', 'red'],
data: [1500, 1300, 1200],
},
],
},
},
'Team 2': {
type: 'bar',
data: {
labels: ['Matt', 'Cory', 'Jim'],
datasets: [
{
label: 'Team 2',
backgroundColor: ['red', 'red', 'red'],
data: [2000, 1800, 1200],
},
],
},
},
'Team 3': {
type: 'bar',
data: {
labels: ['Matt', 'Cory', 'Jim'],
datasets: [
{
label: 'Team 3',
backgroundColor: ['red', 'red', 'red'],
borderWidth: 1,
data: [1000, 1200, 800],
},
],
},
},
'Team 4': {
type: 'bar',
data: {
labels: ['Chris', 'Pat', 'Jamie'],
datasets: [
{
label: 'Team 4',
backgroundColor: ['red', 'red', 'red'],
borderWidth: 1,
data: [2500, 2000, 1500],
},
],
},
},
};
let path = ['root'];
let ctx = document.getElementById('expenseChart').getContext('2d');
let backButton = document.getElementById('backButton');
let chart = new Chart(ctx, {
type: data['root'].type,
data: data['root'].data,
options: {
responsive: true,
onClick: onClickFunction,
plugins: {
legend: { display: true },
},
},
});
function onClickFunction(event, elements) {
if (elements.length > 0) {
const index = elements[0].index;
const currentKey = path[path.length - 1];
const nextKey = data[currentKey].data.labels[index];
// If there is no more key for the item, no more depth.
if (!data.hasOwnProperty(nextKey)) {
return;
}
path.push(nextKey);
updateChart(nextKey);
}
}
function updateChart(key) {
// Destroy the existing chart instance
if (chart) {
chart.destroy();
}
// Create a new chart with the updated type and data
chart = new Chart(ctx, {
type: data[key].type,
data: data[key].data,
options: {
responsive: true,
onClick: onClickFunction,
plugins: {
legend: { display: true },
},
},
});
// Enable/Disable back button based on navigation depth
backButton.disabled = path.length === 1;
}
function resetChart() {
if (path.length > 1) {
path.pop();
updateChart(path[path.length - 1]);
}
}
backButton.addEventListener('click', resetChart);
</script>
</body>
</html>