Using the treemap graph on TypeScript requires me to set an empty data array

[hhenriques1999]

I was trying to implement a sample treemap graph to test and then fully implement it in an application.

My application is React based using:

"dependencies": {
    "bootstrap": "^5.3.2",
    "chartjs-chart-treemap": "^2.3.0",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0"
  },

Here's how I was trying to set it up:

import {
    CategoryScale,
    Chart as ChartJS,
    Legend,
    LineElement,
    LinearScale,
    PointElement,
    Title,
    Tooltip,
} from 'chart.js';
import { Button, Modal } from "react-bootstrap";
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
import { Chart } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    TreemapElement,
    TreemapController,
    Title,
    Tooltip,
    Legend
);

interface MyComponentProps {
    isMyComponentModalOpen: boolean
    setIsMyComponentModalOpen: (isMyComponentModalOpen: boolean) => void;

}

const MyComponentGraph = () => {
    const config = {
        type: 'treemap',
        data: {
            datasets: [
                {
                    label: 'My treemap dataset',
                    tree: [15, 6, 6, 5, 4, 3, 2, 2],
                    borderColor: 'green',
                    borderWidth: 1,
                    spacing: 0,
                    backgroundColor: "red",
                }
            ],
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: 'My treemap chart'
                },
                legend: {
                    display: false
                }
            }
        }
    };

    return (
        <div>
            <h2>TreeMap Example</h2>
            <Chart type="treemap" data={config.data} options={config.options} />
        </div>
    );
};

However, unless I set data: []:

data: {
    datasets: [
        {
            label: 'My treemap dataset',
            data: [],
            tree: [15, 6, 6, 5, 4, 3, 2, 2],
            borderColor: 'green',
            borderWidth: 1,
            spacing: 0,
            backgroundColor: "red",
        }
    ],
},

I get errors at the chart call (around line 64):

return (
        <div>
            <h2>TreeMap Example</h2>
            <Chart type="treemap" data={config.data} options={config.options} />
        </div>
    );

The error:

Property 'data' is missing in type '{ label: string; tree: number[]; borderColor: string; borderWidth: number; spacing: number; backgroundColor: string; }' but required in type 'ChartDatasetProperties<"treemap", TreemapDataPoint[]>'

This kind of "contradicts" the documentation which states that data would be automatically populated/built...
It requires me to set it up as an empty array otherwise it will error out on me (it may be my linting settings?)

Once it's set up, the error goes away and everything works properly (ignore the bright red, it's my fault):

So, is this an implementation issue or documentation issue. Or worse, a user issue 😶.

[kurkle]

Hi, thank you for your good question!

The issue is a typings one. The data array requirement originates from chart.js and I'm not sure it can be changed externally.

The documentation is correct in the aspect that the data array will be populated and is not strictly required by the code, but typings just don't agree. You could use a @ts-ignore or @ts-expect-error comment to suppress the type error, but I'd recommend your already working approach of just providing the empty data array to satisfy the types too.