React implementation

[alvaroserrrano]

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 TreeMapChart.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('treemap').getContext('2d');
  const chart = new TreeMapChart(ctx, {
    data,
    options,
  });
  return (
    <div>
      <div>
        <canvas id='treemap'></canvas>
      </div>
      <chart />
    </div>
  );

Context

• Version:
• Browser:

Additional context

g

[kurkle]

useRef

  const canvas = userRef(null);
  const ctx = canvas.current.getContext('2d');
  // rest of your stuff
  return (
    <div>
      <canvas ref={canvas}></canvas>
    </div>
  );

Also you'd probably need to place the chart initialization in useEffect hook, so that the elements are created before the chart is initialized.

Where does new TreeMapChart() come from?

[alvaroserrrano]

I was trying to create a Class Component, that's the reason why new is there. However, if I wanted to implement a React functional component from scratch, how should I go about?
I want to use the component in a Dashboard as but I do not know how to create the TreeMapChart functional component. What would the canvas ref be pointing to in your example above?

[kurkle]

Forgot .current from my example. Here is a full one:

import {useEffect, useRef} from 'react';
import Chart from 'chart.js/auto';
import {TreemapController, TreemapElement} from 'chartjs-chart-treemap';

Chart.register(TreemapController, TreemapElement);

export function ExampleChart() {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current.getContext('2d');
    const chart = new Chart(ctx, {
      type: 'treemap',
      data: {
        datasets: [{
          tree: [1, 2, 3]
        }]
      }
    })
    return () => chart.destroy();
  }, []);
  return <div><canvas ref={canvas}></canvas></div>
}

[alvaroserrrano]

Thanks a lot!! This works