I'm having the following question When I try to run the test code, there is a error with chrome

Screenshots / Sketches

Context this is my test code .

• Version:

• Browser: chrome Additional context

I'm having the following question... How to use chartjs-chart-wordcloud with vue-chart-3 without errors?

main.ts - Vue render file

import { WordCloudController, WordElement } from 'chartjs-chart-wordcloud'
Chart.register(WordCloudController, WordElement)

Vue component file
<template>
            ...
            <div class="md:flex-1 w-full min-h-full">
                <WordCloudChart :chartData="chartData" />
            </div>
            ...
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch, onMounted } from 'vue'
import { ChartData } from 'chart.js'
import { WordCloudChart } from "chartjs-chart-wordcloud";
...

export default defineComponent({
    components: { WordCloudChart},
...
    setup(props) {
         ...

        const wordsValues = computed(() => {
            return words.value.map((d) => d.value)
        })
        
        const wordsTitles = computed(() => {
            return words.value.map((d) => d.key)
        })

        onMounted(() => {
            getdpWordCloudData()
        })


        ...
        const chartData = computed<ChartData<"wordCloud">>(() => (<ChartData<"wordCloud">><unknown>{
            labels: words.value.map((e) => e.key),
            datasets: [
                {
                    label: "",
                    data: wordsValues.value,
                }
            ]
        }));

        return {chartData}
    },
})
</script>

I get this error on browser console:

       Uncaught (in promise) TypeError: Class constructor WordCloudChart cannot be invoked without 'new'
    at renderComponentRoot (runtime-core.esm-bundler.js:475:19)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4332:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160:29)
    at setupRenderEffect (runtime-core.esm-bundler.js:4458:9)
    at mountComponent (runtime-core.esm-bundler.js:4241:9)
    at processComponent (runtime-core.esm-bundler.js:4199:17)
    at patch (runtime-core.esm-bundler.js:3791:21)
    at mountChildren (runtime-core.esm-bundler.js:3987:13)
    at mountElement (runtime-core.esm-bundler.js:3896:17)
    at processElement (runtime-core.esm-bundler.js:3868:13)

No chart drawn, exception thrown.

To Reproduce I use Laravel Mix to build js assets. Used libs (package.json dependencies):

"dependencies": {
        "@sgratzl/chartjs-esm-facade": "^3.0.0-alpha.21",
        "@ttskch/select2-bootstrap4-theme": "^1.3.4",
        "bootstrap": "4.5.3",
        "chart.js": "^3.0.0-beta.11",
        "chartjs-chart-wordcloud": "^3.0.0-beta.9",
        "datatables.net-bs4": "^1.10.23",
        "datatables.net-buttons-bs4": "^1.6.5",
        "datatables.net-colreorder-bs4": "^1.5.3",
        "datatables.net-fixedcolumns-bs4": "^3.3.2",
        "datatables.net-fixedheader-bs4": "^3.1.8",
        "datatables.net-keytable-bs4": "^2.6.0",
        "datatables.net-responsive-bs4": "^2.2.7",
        "datatables.net-rowgroup-bs4": "^1.1.2",
        "datatables.net-rowreorder-bs4": "^1.2.7",
        "datatables.net-scroller-bs4": "^2.0.3",
        "datatables.net-searchbuilder-bs4": "^1.0.1",
        "datatables.net-searchpanes-bs4": "^1.2.2",
        "datatables.net-select-bs4": "^1.3.1",
        "jqcloud2": "^2.0.3",
        "jquery": "3.5.1",
        "jszip": "^3.6.0",
        "owl.carousel": "2.3.4",
        "pdfmake": "^0.1.70",
        "popper.js": "1.16.1",
        "select2": "^4.0.13",
        "wordcloud": "^1.1.2"
    }

HTML file:

<div id="container" style="width: 75%">
    <canvas id="test-canvas"></canvas>
</div>

JS file, composed with webpack:

import { WordCloudChart } from 'chartjs-chart-wordcloud';
import { Chart, LinearScale } from 'chart.js';

Chart.register(LinearScale);

const words = [
            { key: 'word', value: 10 },
            { key: 'words', value: 8 },
            { key: 'sprite', value: 7 },
            { key: 'placed', value: 5 },
            { key: 'layout', value: 4 },
            { key: 'algorithm', value: 4 },
        ];

const data = {
    labels: words.map((d) => d.key),
    datasets: [
        {
        label: '',
        data: words.map((d) => 10 + d.value * 10),
        },
    ],
};

new WordCloudChart(document.getElementById('test-canvas').getContext('2d'), {
    data: data,
    options: {
        title: {
            display: true,
            text: 'Chart.js Word Cloud',
        },
    },
});

Exception:

Place in code (i tried to use available fields of ctx object, but this leads to another error with fit property somewhere):

• Version: 3.0.0-beta.9
• Browser: Google Chrome 88.0.4324.190 (64-bit)

On initialising and creating the chart instance, the webpage freezes, and has to be force closed

To Reproduce

1. Happening only on production

Expected behavior

Wordcloud should initialize and render

Screenshots

Context

• Version: v3.0.0_Beta-7
• Browser: Any

Additional context

options: {

    onClick: (e) => {
      
  const canvasPosition = ctx.helpers.getRelativePosition(e, ctx);

}

Getting below error

core.mjs:6461 ERROR TypeError: Cannot read properties of undefined (reading 'getRelativePosition') at Chart.onClick (app.component.ts:37:42) at callback (helpers.segment.js:92:1) at Chart._handleEvent (chart.esm.js:6090:17) at Chart._eventHandler (chart.esm.js:6072:1) at listener (chart.esm.js:5952:1) at Chart.event (chart.esm.js:3214:1) at helpers.segment.js:28:1 at timer (zone.js:2561:1) at ZoneDelegate.invokeTask (zone.js:406:1) at Object.onInvokeTask (core.mjs:25444:1)

I'm having the following question. How can this be included in a React project as a component. My problem is basically understanding how could I access the ctx (document.getElementById) from a React functional component. It is returning me null.

Screenshots / Sketches

This is my WordsCloud.js file for reference.

const data = {
    labels: initialWords.map((d) => d.key),
    datasets: [
      {
        label: '',
        data: initialWords.map((d) => 10 + d.value * 10),
      },
    ],
  };
  const options = {
    title: {
      display: true,
      text: 'Chart.js Word Cloud',
    },
  };
  const ctx = document.getElementById('cloudmap').getContext('2d');
  const chart = new WordCloudChart(ctx, {
    data,
    options,
  });
  return (
    <div>
      <div>
        <canvas id='cloudmap'></canvas>
      </div>
      <chart />
    </div>
  );

Context

• Version:
• Browser:

Additional context

In the documentation there is a basic example of the wordcloud plugin. What's missing for me is an explanation of how to use the options. For example, how can the colors and orientation of the words be changed? The supplied link to the source is not enough for me to see how the options parameter should be filled.

I use word clouds with some data i can't make any assumption on its weigths distribution. It's also i don't know min and max possible weights and can only assume weights scale, for example, logarithmic. But as i understood, i have to scale weights myself before feeding data into word cloud chart. Like with line charts, scale may be changed automatically that so all the data fit on canvas. Is there some way to achieve similar behaviour in word cloud chart?

Thanks for response!

The codepen example does not work, the canvas stays blank. There is the following error message in the console:

chartjs-chart-wordcloud@3:1 Uncaught TypeError: a.default is not a function
    at new s (chartjs-chart-wordcloud@3:1:1910)
    at bn.buildOrUpdateControllers (chart.js@3:13:91691)
    at bn.update (chart.js@3:13:92264)
    at bn.<anonymous> (chart.js@3:13:88470)
    at bn._doResize (chart.js@3:7:5357)
    at bn._resize (chart.js@3:13:89762)
    at bn.resize (chart.js@3:13:89353)
    at n (chart.js@3:13:98477)
    at chart.js@3:13:39499
    at chart.js@3:7:5247

• Browser: tested in Chromium and Firefox

We are getting an error "ERROR Error: Canvas is already in use. Chart with ID '2' must be destroyed before the canvas can be reused." while rebinding the chart from API,

we have used
ctx.clear(); and ctx.destroy() method for clearing the canvas but getting errors while used ERROR TypeError: ctx.destroy is not a functin

ERROR Error: Canvas is already in use. Chart with ID '2' must be destroyed before the canvas can be reused. at new Chart (chart.esm.js:5354:1) at new WordCloudChart (index.umd.js:747:1) at EmployeeComponent.wordcloudChart (employee.component.ts:281:21) at employee.component.ts:339:14 at Object.next (Subscriber.js:110:1) at SafeSubscriber._next (Subscriber.js:60:1) at SafeSubscriber.next (Subscriber.js:31:1) at map.js:7:1 at OperatorSubscriber._next (OperatorSubscriber.js:9:1) at OperatorSubscriber.next (Subscriber.js:31:1)

I am great fan of your work. My question, is there a way to make Venn and WordCloud plugins work in 2.X versions of Chart.Js. Preferably last stable version 2.9.4 of Chart.Js 2?