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/[email protected]/dist/chart.min.js', () => {
  // Dynamically load Chart.js treemap extension script
  loadScript('https://cdn.jsdelivr.net/npm/[email protected]', () => {
    // 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; `