I am currently trying to use highcharts to create a word cloud so I can display it in a pdf that I have generated. I cannot seem to get it to work.

I am trying to have an offline export because while generating this pdf, I don’t have a website~ to generate the chart and then export it from there.

This is a react typescript project, I am using react-pdf to make the pdf.

current render-word-cloud.jsx

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsWordCloud from 'highcharts/modules/wordcloud';


const RenderWordCloud = ({ data, title, onChartRendered }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    HighchartsWordCloud(Highcharts); // Initialize the Word Cloud module

    Highcharts.chart(chartRef.current, {
      series: [{
        type: 'wordcloud',
        data: JSON.parse(data)
      }],
      title: {
        text: title
      },
      chart: {
        events: {
          load: function () {
            const imageData = this.getSVG(); // Get the SVG of the chart
            onChartRendered(imageData); // Callback function to handle the chart image data
          }
        },
        renderTo: chartRef.current // Add this line to specify the render target
      },
      exporting: {
        enabled: false // Disable exporting options to prevent unwanted interactions
      }
    });
  }, [data, title, onChartRendered]);

  return <div ref={chartRef}></div>;
};

export default RenderWordCloud;

my types:

import React from 'react';

export interface IRenderWordCloudProps {
  data: string;
  title: string;
  onChartRendered?: (imageData: string) => void;
}

declare const RenderWordCloud: React.FC<IRenderWordCloudProps>;
export default RenderWordCloud;

Finally word cloud render in my renderer.tsx

const renderWordCloudComponent = (
    chartType: string,
    index: number,
    title: string
  ) => {
    let value;
    let logTitle;

    switch (chartType) {
      case 'top100AdjectiveWordCloud':
        value = portalData.detailedAnalysis.details.adjectiveData;
        logTitle = 'Top 100 Adjective Word Cloud';
        break;
      case 'top100NounWordCloud':
        value = portalData.detailedAnalysis.details.nounData;
        logTitle = 'Top 100 Noun Word Cloud';
        break;
      default:
        console.error('Unsupported word cloud type.');
        return <React.Fragment />;
    }

    console.log(`${logTitle} / ${title || 'No Title'} + ${index}:`, value);

    const handleChartRendered = (imageData: string) => {
      console.log('Chart rendered as image:', imageData);
      // Use imageData for your PDF generation logic
      // For example, you might add it to your PDF as an image
    };

    return (
      <RenderWordCloud
        data={JSON.stringify(value)}
        title={logTitle}
        onChartRendered={handleChartRendered}
      />
    );
  };

I’m not sure if I’m on the right path here but that code gives me this error.

{"errorType": "TypeError", "errorMessage": "Cannot read properties of undefined (reading 'hasOwnProperty')", "trace": ["TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')", " at i (/node_modules/highcharts/modules/wordcloud.js:8:343)", " at HighchartsWordcloud (/node_modules/highcharts/modules/wordcloud.js:8:510)", " at e (/src/cell-components/render-word-cloud.jsx:10:5)", " at Ue (/node_modules/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:108:200)", " at eventHandler (/node_modules/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:156:231)", " at Mb (/node_modules/scheduler/cjs/scheduler.development.js:818:12)", " at hc (/node_modules/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:29:325)", " at Vf (/node_modules/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:155:214)", " at callback (/node_modules/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:155:121)", " at Hr (/node_modules/scheduler/cjs/scheduler.development.js:762:34)"]}