Expected behavior
When hovering over a pie chart, it should not throw an error.
Current behavior
I implemented chart.js in my Angular 14 app without ng2-charts and since I have this in my tsconfig.app.json:
{
"compilerOptions": {
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
helpers.segment.cjs
is loading @kurkle/color/dist/color.cjs
(not sure if above is actually responsible for this). After that every time I hover over a pie chart, I got an error:
core.mjs:7629 ERROR TypeError: color$1.Color is not a constructor
at getHoverColor (helpers.segment.cjs:755:49)
at Defaults.hoverBorderColor (helpers.segment.cjs:1035:49)
at _resolveScriptable (helpers.segment.cjs:1711:13)
at _resolveWithContext (helpers.segment.cjs:1695:17)
at helpers.segment.cjs:1644:46
at _cached (helpers.segment.cjs:1687:19)
at Object.get (helpers.segment.cjs:1644:20)
at Config.resolveNamedOptions (chart.cjs:5425:35)
at PieController._resolveElementOptions (chart.cjs:963:31)
at PieController.resolveDataElementOptions (chart.cjs:938:21)
I debug it and found out that the problem is that color$1
is a function and not an object. In this case the correct syntax should be new color$1(value)
instead of new color$1.Color(value)
, because @kurkle/color/dist/color.cjs
have CommonJS syntax. If Ecmascript module loading is used, chart.js
is loading @kurkle/color/dist/color.esm.js
and the syntax in helpers.segment.cjs
is correct, because color$1
is now an object.
Reproducible sample
https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-n6cdgi?file=/tsconfig.json
Optional extra steps/info to reproduce
Note that the implementation to the codesandbox is working properly, because @kurkle/color/dist
is using the color.esm.js
and I can't make it so it would use color.cjs
(my case). I'm attaching screenshots.
Screenshot of node_modules in codesandbox app:
Screenshot of node_modules in my app:
So at the end, if you can make the code example to load @kurkle/color/dist/color.cjs
you will see the error I'm getting while hovering on a pie chart.
Possible solution
No response
Context
No response
chart.js version
v4.1.2
Browser name and version
Chrome,108.0.5359.125
Link to your project
No response
type: bug