Cannot read properties of undefined (reading 'handleEvent') #12032

mcrrobinson · 2025-02-12T15:52:25Z

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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Cannot read properties of undefined (reading 'handleEvent') #12032

Cannot read properties of undefined (reading 'handleEvent') #12032

mcrrobinson commented Feb 12, 2025

Cannot read properties of undefined (reading 'handleEvent') #12032

Cannot read properties of undefined (reading 'handleEvent') #12032

Comments

mcrrobinson commented Feb 12, 2025