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

[shaogatalam]

import React, { useEffect } from 'react';

const TreemapChart = ({ data }) => {
useEffect(() => {
const loadScript = (url, callback) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = true;
script.onload = callback;
document.head.appendChild(script);
};

// Dynamically load Chart.js script
loadScript('https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js', () => {
  // Dynamically load Chart.js treemap extension script
  loadScript('https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3', () => {
    // Check if both Chart.js and Chart.js treemap scripts have been loaded
    if (window.Chart && window.Chart.controllers && window.Chart.controllers.treemap) {
      const canvas = document.getElementById('treemapCanvas');
      const ctx = canvas.getContext('2d');

      const config = {
        type: 'treemap',
        data: {
          datasets: [
            {
              data: data.map((segment) => ({
                v: segment.count,
                x: segment.ar,
                y: segment.af,
                z: segment.am,
              })),
              backgroundColor: data.map((segment) => getBackgroundColor(segment.segment)),
              labels: data.map((segment) => `${segment.segment} - ${segment.count}`),
            },
          ],
        },
        options: {
          onClick: (event, elements) => {
            if (elements && elements.length > 0) {
              const clickedIndex = elements[0].index;
              console.log('Item clicked', clickedIndex);
            }
          },
          maintainAspectRatio: false,
          title: {
            display: false,
            text: 'Basic treemap sample',
          },
          legend: { display: false },
          tooltips: {
            callbacks: {
              title: (item, chartData) => `This item: ${item[0].index}`,
              label: (item, chartData) => {
                const dataset = chartData.datasets[item.datasetIndex];
                const dataItem = dataset.data[item.index];
                return dataItem.v;
              },
            },
          },
        },
      };

      new window.Chart(ctx, config); // Note the use of window.Chart
    }
  });
});

}, [data]);

return ;
};

const getBackgroundColor = (segment) => {
// Customize color logic based on your segments
switch (segment) {
case 'High-Value':
return 'rgba(75, 192, 192, 0.6)';
case 'At-Risk':
return 'rgba(255, 99, 132, 0.6)';
case 'Low-Value':
return 'rgba(255, 255, 102, 0.6)';
case 'Mid-Value':
return 'rgba(102, 204, 255, 0.6)';
case 'Churned':
return 'rgba(204, 102, 255, 0.6)';
case 'Superfans':
return 'rgba(255, 153, 51, 0.6)';
case 'Potential Loyalists':
return 'rgba(51, 204, 51, 0.6)';
default:
return 'rgba(0, 0, 0, 0.6)';
}
};

export default TreemapChart;
`