symfony/ux-chartjs impossible to use adapters

[k-ecotrade]

Hello,
I've seen a few posts about this on stackoverflow, but no answer exists yet, so I wanted to know if it is possible to implement an adapter (example date-fns) to Symfony Ux's implementation of chart.js.
I tried for a long time but I can't find a solution.

Symfony seems to be using '@symfony/ux-chartjs' while the adapters are modifying 'chart.js' directly, from what I understand.

I didn't find a way to pass this problem, so if anybody can help me about this, it would be very appreciated.

May be if anyone can bring an example of working code for this.

Thank you for your time.

[weaverryan]

Hi there!

This "should" just work - so we will need to dig into the problem a bit. Both symfony/ux-chartjs and chartjs-adapter-date-fns import code from the chart.js library. Because chart.js is a peerDependency of both, npm/yarn should only be installing 1 copy of chart.js into node_modules/. And so, when these 2 libraries import something from chart.js, they should be importing from the same package. The flow should be:

• chartjs-adapter-date-fns is imported and it modifies chart.js
• chart.js is imported by symfony/ux-chartjs, which uses the modified version.

So there could be 2 things going wrong:

A) Ordering: if chart.js is imported by symfony/ux-chartjs first... it's possible that it will use an unmodified version (though, since the chart isn't actually rendered until slightly later, I would still imagine that chartjs-adapter-date-fns would have a chance to modify things before the actual chart is built).

B) Or, perhaps the 2 libraries are, in the end, importing different files from the chart.js package for some reason - like one is importing dist/chart.js and another is importing dist/chart.cjs for some reason.

Btw, where are you importing chartjs-adapter-date-fns? I would do it right in assets/app.js at the very top (at least, that's both the simplest and earliest place to do it).

[k-ecotrade]

Thank you for answering and for your time.

I'm not 100% sure if I understand correctly how @symfony/ux-chartjs works, but when I check the files, it installs a '/vendor/symfony/ux-chartjs/assets/node_modules' folder, and it seems to use a chart.js 'copy' inside this folder.
While 'chartjs-adapter-date-fns' seems to modify what is inside the '/node_modules/chart.js' folder.

I tried importing chartjs-adapter-date-fns at different places, and at the very beginning of assets/app.js as you suggested too. The error I get is a javascript one from the console : Error: This method is not implemented: Check that a complete date adapter is provided.

I have the same result every time and I don't have any other idea to go further for the moment.

[weaverryan]

when I check the files, it installs a '/vendor/symfony/ux-chartjs/assets/node_modules' folder,

Hmm, really? You see a node_modules/ inside /vendor/symfony/ux-chartjs/assets/? I don't see that on my projects. Are you using npm or yarn?

[k-ecotrade]

Yes it's what I have. I use npm. (Node v18.16.1 and npm v9.8.0) It is on a Symfony 6.2.12 project.
What do you use to get your result on your project ?
Are you able to use an adapter for @symfony/ux-chartjs on your project? (like date-fns for example)
I just followed Symfony's documentation to install chart.js : https://symfony.com/bundles/ux-chartjs/current/index.html

[weaverryan]

Ok, I dug into this. The problem is npm-only, but it's not really npm's fault. Try running:

npm why chart.js

I bet you'll see 2 root "sections" in this output, each with a slightly different version of chart.js. The problem is that symfony/ux-chart.js currently allows chart.js@"^3.4.1 <3.9". We should allow 3.9 and 4 - but it's a chore to rework our test suite so that the new ESM stuff from chart.js doesn't confuse the tests.

Anyway, it's very likely that in your package.json, you have "chart.js": "^3.4.1" and you have 3.9.1 installed. So, npm sees that you need 3.9 and <3.9 at the same time, so it installs 2 copies of chart.js.

Try changing your version constraint for chart.js to ^3.4.1 <3.9. Then run npm install (you may need to delete your package-lock.json file, but I didn't). Finally, run yarn why chart.js again to verify there is only one entry.

We need to add 3.9+4 support for chart.js in symfony/ux-chart.js. But also, I can tweak the version constraint so that users get ^3.4.1 <3.9 until then.

[k-ecotrade]

Oh nice it worked!

So I just added "chart.js": "^3.4.1 <3.9", to my package.json, deleted my package-lock.json, and run npm install.

Then I installed date-fns :
npm install date-fns chartjs-adapter-date-fns --save

imported it in my app.js file :
import 'chartjs-adapter-date-fns';

And now I can use scales type time perfectly 👍
$chart->setOptions([ 'scales' => [ 'x' => [ 'type' => 'time', ] ] ]);

Thank you a lot for your help, I'll try to notice the people on Stackoverflow who had the same problem recently.