How to use this plugin with react-chartjs-2 (chartjs 3 version)

[sanjeeviraj]

I am trying to use chartjs tree map plugin with react-chartjs-2 library (chartjs 3 version), the below is the pervious version usage of treemap

import React, { Component } from 'react'
import ChartComponent from 'react-chartjs-2';
import 'chartjs-chart-treemap';

export default class TreeMap extends React.Component {
    
    render() {        
        return (
            <ChartComponent
                {...this.props}
                ref={ref => this.chartInstance = ref && ref.chartInstance}
                type='treemap'
            />
        );
    }
}

How to implement it in new version

[NemeZZiZZ]

Use canvas, ref for it and useEffect:

<canvas ref={canvas}></canvas>

useEffect(() => {
    const ctx = canvas && canvas.current && canvas.current.getContext('2d')
    const chart = new Chart(ctx, options)
}

[kurkle]

I haven't used react-chartjs-2, but I'm guessing you are just missing the registration:

import {Chart} from 'chart.js';
import { Component } from 'react'
import ChartComponent from 'react-chartjs-2';
import {TreemapController, TreemapElement} from 'chartjs-chart-treemap';

// Need to register
Chart.register(TreemapController, TreemapElement);

export default class TreeMap extends Component {
    
    render() {        
        return (
            <ChartComponent
                {...this.props}
                ref={ref => this.chartInstance = ref && ref.chartInstance}
                type='treemap'
            />
        );
    }
}

[baloodevil]

The following code gives a design-time error of JSX element type 'ChartComponent' does not have any construct or call signatures.ts(2604) and a runtime error of Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import { Chart as ChartJS } from "chart.js";
import ChartComponent from "react-chartjs-2";
import React, { useRef } from "react";
import { TreemapController, TreemapElement } from "chartjs-chart-treemap";

ChartJS.register(TreemapController, TreemapElement);

export default function TreeMapChart(props: React.JSX.IntrinsicAttributes) {
  const chartInstanceRef = useRef(null);

  return (
    <ChartComponent
      {...props}
      // eslint-disable-next-line no-return-assign
      ref={(ref: { chartInstance: any }) => (chartInstanceRef.current = ref && ref.chartInstance)}
      type="treemap"
    />
  );
}

How to fix this so that I can use TreeMap from react-chartjs-2?