Uncaught TypeError: Cannot read properties of undefined (reading 'getProps')

[costea93]

Hey guys, i am trying to use Dendrogram chart, but something is wrong and i am out of ideas... Every time i am getting this error:

Cannot read properties of undefined (reading 'getProps')

here are npm versions

npm show chartjs-chart-graph version -> 4.3.4
npm show chart.js version -> 4.4.7

this is my component:

import React, { useEffect, useRef } from 'react';
import { Chart, registerables } from 'chart.js';
import 'chartjs-chart-graph';
import { DendrogramController, DendrogramChart, EdgeLine } from 'chartjs-chart-graph';

Chart.register(...registerables, EdgeLine, DendrogramController, DendrogramChart);

const DendrogramChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const treeData = [
      { id: 'original', name: 'Original', parent: null },
      { id: 'replication1', name: 'Replication 1', parent: 'original' },
      { id: 'replication2', name: 'Replication 2', parent: 'original' },
      { id: 'replication2.1', name: 'Replication 2.1', parent: 'replication2' },
      { id: 'replication2.2', name: 'Replication 2.2', parent: 'replication2' },
      { id: 'replication2.1.1', name: 'Replication 2.1.1', parent: 'replication2.1' },
      { id: 'replication2.1.2', name: 'Replication 2.1.2', parent: 'replication2.1' }
    ];

    const ctx = chartRef.current?.getContext('2d');

    if (ctx) {
      new Chart(ctx, {
        type: 'dendrogram',
        data: {
          labels: treeData.map(node => node.name),
          datasets: [
            {
              pointBackgroundColor: 'steelblue',
              pointRadius: 5,
              data: treeData.map(node => ({ ...node }))
            }
          ]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { display: false },
            datalabels: {
              display: true,
              color: 'red',
              align: 'right',
              font: { size: 14 }
            }
          },
          layout: {
            padding: { top: 20, left: 20, right: 20, bottom: 20 }
          }
        }
      });
    }
  }, []);

  return (
    <div style={{ width: '100%', height: '600px' }}>
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default DendrogramChart;

What is wrong here? and how can i fix this problem?

[costea93]

Anyone any ideas about that?