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

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 / chartjs-chart-treemap

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