v2.3.0 with chart.js 4.4.1 renders unwanted context.raw object

[mmcossu]

"chart.js": "^4.4.1", "chartjs-chart-treemap": "^2.3.0", "next": "14.0.4", "react": "^18", "react-chartjs-2": "^5.2.0",

'treemap' chart renders unwanted coordinate captions the entire 'context.raw' object, as visible from the attached image.

no reference in the docs about it. is this a bug or is it something that can be configured?

i forked michaeloliverx Treemap Chart Example Stackblitz project into this new StackBlitz project with v2.3.0 package. But it does not seem to be replicable.

I'm not the only one with this problem though: Stack Overflow - Chart.js Treemap plugin showing coordinate data in chart image rendered

[kimminhyug]

Have you solved it?

[kimminhyug]

I found the item causing this problem. "chartjs-plugin-datalabels"

drawTextLine.fillText is draw that text

chartjs-plugin-datalabels

if(no label) data object roop and draw all

[mmcossu]

Sorry, not clear... The problem is in the datalabels plugin? I don't see references of the imported plugin in your code... So how do the things mix up?

[kimminhyug]

Sorry, not clear... The problem is in the datalabels plugin? I don't see references of the imported plugin in your code... So how do the things mix up?

As a temporary solution you need to control the label formatter

 const options = {
      plugins: {
        title: {
          display: true,
          text: (ctx) => 'US area by ' + GROUPS.join(' / '),
        },
        legend: {
          display: false,
        },
        // <------- label control
        datalabels: { 
          formatter: function (value, context) {             
            return value._data.label;
            // or  You wan't use config.data.labels, Please refer to the code below
            // context?.chart?.data?.labels?.[context.dataIndex]
          },
        },
      },
    };

    const config = {
      type: 'treemap',
      data: {
       // 
        labels: ['test1', 'test2'], 
        datasets: [
          {
            tree: statsByState,
            key: 'area',
            groups: GROUPS,
            spacing: 3,
            borderWidth: 0.5,
            borderColor: 'rgba(200,200,200,1)',
            backgroundColor: 'rgba(220,230,220,0.3)',
            hoverBackgroundColor: 'rgba(220,230,220,0.5)',
            labels: {
              display: false,
              overflow: 'hidden',
            },
          },
        ],
      },
      options: options,
    };