Crashes on Chart.js 4.4.1 and 4.4.0

[igordata]

Hello,

I'm trying to make it work with Chart.js server side, node.js 19 and chartjs-plugin-datalabels version 2.2.0

Chart.js 4.4.1 or 4.4.0 - same error

here is the log:

someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:121
  var x0 = origin.x;
                  ^

TypeError: Cannot read properties of null (reading 'x')
    at orient (someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:121:19)
    at Object.fallback [as positioner] (someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:345:13)
    at coordinates (someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:841:21)
    at Object.draw (someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:1012:18)
    at Object.afterDatasetsDraw (someProject\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:1305:12)
    at callback (file:///someProject/node_modules/chart.js/dist/chunks/helpers.segment.js:79:19)
    at PluginService._notify (file:///someProject/node_modules/chart.js/dist/chart.js:5073:17)
    at PluginService.notify (file:///someProject/node_modules/chart.js/dist/chart.js:5056:29)
    at Chart.notifyPlugins (file:///someProject/node_modules/chart.js/dist/chart.js:6338:30)
    at Chart._drawDatasets (file:///someProject/node_modules/chart.js/dist/chart.js:6081:14)

Node.js v19.9.0

Just in case:

  "dependencies": {
    "axios": "^1.6.7",
    "canvas": "2.10.2",
    "chart.js": "4.4.0",
    "chartjs-plugin-datalabels": "^2.2.0",
    "docx": "^8.5.0"
  }

Any help will be appreciated!

[igordata]

I feel stuck. Any ideas? 😅

[divyavanmahajan]

Hi, This appears to be a bug in chartjs-plugin-datalabels. In the code - there is a function getPositioner() which returns the positioned depending on the class of the element. However - the code imports chart.js - and the element was created by another part of the code which imported chart.cjs - Javascript thinks the two are different classes - and this causes the code to fail.

You can troubleshoot this in the browser by setting a breakpoint in getPositioner(). Compare Object.getPrototypeOf(el) with chart_js.ArcElement - the constructor shows the source files are different.

Workaround

Assuming you are using ESM (import/export), change your import from

import ChartJSDataLabel from 'chartjs-plugin-datalabels';

to

import ChartJSDataLabel from 'chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js';

Note: You must change this in all files that import chartjs-plugin-datalabels.

[igordata]

A stacked bar chart works though. Which is weird.