1

I have implemented the worldcloud of this form: [https://www.npmjs.com/package/chartjs-chart-wordcloud] in a tsx project. The cloud is implemented and mostly doing fine. I have useEffect on the chart, but it's only suuposed to run one (maybe twice in debug mode, and that's why I have an if statement). But yes I don't understand why it moves, the original implementation shows no intention of doing this. I am using tsx, and tailwind for CSS.

I see that height is being changed in the console when I am running the code in inspect. I don't know why this is happening. (I have changed the code a bit, by some suggestions from the comments, so updated the code but the same problem)

Here is my code that I have implemented.

import React, { useEffect, useRef } from 'react';
import { WordCloudChart } from 'chartjs-chart-wordcloud';
import { Chart, registerables } from 'chart.js';
import { Chart as ChartJS } from 'chart.js/auto'
Chart.register(...registerables);


export const WordCloud: React.FunctionComponent = () => {
  const canvasRef = useRef<HTMLCanvasElement|null>(null);
  let canvas : any = canvasRef?.current;
  let chart:any;
  useEffect(() => {
    if (chart) {
      chart.destroy();
    }
    //let canvas : any = document.getElementById("mycanvas");
    let canvas : any = canvasRef?.current;
    let ctx = canvas.getContext("2d", { willReadFrequently: true }); 
    
    chart = new WordCloudChart(ctx, {
      data: {
        // text
        labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
        datasets: [
          {
            label: 'DS',
            // size in pixel
            data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
          },
        ],
      },
      options: {},
    });
  }, []);
  return(
    <div className='max-h-10'>
      <canvas className='max-h-10 max-w-10' ref={canvasRef}></canvas>
      <canvas className='max-h-10 max-w-10' id="mycanvas"></canvas>
      <p>Ja du</p>
    </div>
  );
};
Guten
  • 11
  • 2
  • The word cloud plugin usually jiggles on load for me, as it tries to find a place for all the words to fit. I find this is especially an issue in small charts, and it will log an error message to the console about how it couldn't fit all of the words on the screen. Is the jiggling really an issue for you? Also, if you make the image bigger, does the jiggling stop? – Julianna Mar 07 '23 at 05:38
  • This might be helpful: https://codesandbox.io/s/sunburst-forked-rc01t1?file=/src/wc/chartjs-chart-wordcloud.js Here, they use a react-chartjs-2 as a container, register the wordcloud controller/elements, and then just pass along type=wordCloud – Julianna Mar 08 '23 at 21:20

1 Answers1

1

I've had problems of weird behavior when using document.getElementById in react components with chartjs before. I've solved some issues with refs, so it may be worth a shot?

So, initialize with

const canvasRef = useRef<HTMLCanvasElement|null>(null)

Add to canvas with:

<canvas className='max-h-10 max-w-10' ref={canvasRef}></canvas>

And call it with:

let canvas = canvasRef?.current
Julianna
  • 152
  • 6