3

I would like to add a treemap chart from chartjs-chart-treemap into my existing project that uses react-chartjs-2.

I tried so far:

import ChartComponent from 'react-chartjs-2';


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

,but I can see following error when trying to render this component:

Error: "treemap" is not a chart type.

How can I use chartjs-chart-treemap with React?

Dominik
  • 107
  • 8

1 Answers1

3

the chartjs-chart-treemap library has to be imported to the component file

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'
            />
        );
    }
}
sanjeeviraj
  • 135
  • 2
  • 10
  • I am not able to get this solution working. I get an error `JSX element type 'ChartComponent' does not have any construct or call signatures.` Also, can you update this to use React's functional components instead of extends? – user358041 Jun 15 '23 at 03:04