chartjs-plugin-zoom doesn't seem to work with chartjs-chart-wordcloud (React)

[BlackWolf00]

I implemented both packages and the dependecies, followed the guide of chartjs-plugin-zoom and tried different combinations of options but nothing happened, the zoom don't work. I'm working with React.

Packages:

"chart.js": "^4.3.0",
"chartjs-chart-wordcloud": "^4.2.0",
"chartjs-plugin-zoom": "^2.0.1",
"hammerjs": "^2.0.8",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",

Below my simplified code:

General WordCloudComponent for reuse:

import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, CategoryScale, BarElement, LinearScale, Tooltip } from 'chart.js';
import { WordCloudChart, WordCloudController, WordElement } from 'chartjs-chart-wordcloud';
import zoomPlugin from 'chartjs-plugin-zoom';

function WordCloudComponent({ options, data }) {
  ChartJS.register(WordCloudChart, WordCloudController, WordElement, ArcElement, CategoryScale, BarElement, LinearScale, Tooltip, zoomPlugin);

  return (
    <div style={{ width: windowWidth, height: '600px', display: 'grid' }}>
      <div style={{ width: windowWidth, placeSelf: 'center', height: '600px' }}>
        <Chart type="wordCloud" options={options} data={data} />
      </div>
    </div>
  );
}

export default WordCloudComponent;

Component calling WordCloudComponent:

import { useState, useEffect } from 'react';
import { Button, Grid, OutlinedInput, Slider, Typography } from '@mui/material';
import WordCloudComponent from './WordCloudComponent';

function WordCloud() {

  const [option, setOption] = useState({});
  const [data, setData] = useState({});
  const [complete, setComplete] = useState(false);

  useEffect(() => {
    if (tagcloud) {
      setOption({
        plugins: {
          legend: {
            display: false,
          },
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true,
              },
              mode: 'xy',
            },
          },
        },
        color: 'black',
      });

      const totalWeight = tagcloud.reduce((sum, item) => sum + item.weight, 0);

      setData({
        labels: tagcloud.map((tag) => tag.word),
        datasets: [
          {
            data: tagcloud
              .filter((tag) => (tag.weight >= rangedFilter[0] && tag.weight <= rangedFilter[1] ? (tag.weight / totalWeight) * calculateScalingFactor(tag.weight / totalWeight) : 0)).map((tag) => (tag.weight / totalWeight) * calculateScalingFactor(tag.weight / totalWeight)),
          },
        ],
      });
      setComplete(true);
    }
  }, [tagcloud, complete]);

  const resetFilter = () => {
    setRangedFilter([0, Math.max(...tagcloud.map((tag) => tag.weight))]);
    setComplete(false);
  };

  return (
    <>
      <Button onClick={() => setComplete(false)}>{t('common.word.filter')}</Button>
      <Button onClick={resetFilter}>{t('common.word.noFilter')}</Button>
      {complete && <WordCloudComponent options={option} data={data} />}
    </>
  );
}

export default WordCloud;

I tried the solution suggested here https://github.com/chartjs/chartjs-plugin-zoom/issues/64 but nothing changes