How to add DateTime adapter to symfony/ux-chartjs?

Question

I am trying to setup ChartJS with Symfony UX. Since a default datetime adapter is not included with ChartJS 3+, I am getting the following error when using time unit in an axis.

This method is not implemented: Check that a complete date adapter is provided.

How can I add a ChartJS datetime adapter to symfony/ux-chartjs?

I tried importing chartjs-adapter-moment to my app.js, but this adds a second copy of ChartJS module from node_modules/chart.js/dist/chart.mjs to the generated bundle, and registers the adapter to this second copy.

But the symfony ux controller is using its own copy of ChartJS from vendor/symfony/ux-chartjs/assets/node_modules/chart.js/dist/chart.esm.js.

Answer 1

I was facing the same problem and couldn't find an answer. So I asked for some help on Github and we finally found a solution : https://github.com/symfony/ux/issues/1013

So on my project the issue was that it was installing two chart.js

npm why chart.js

And to fix it, I specified this on my package.json :

"chart.js": "^3.4.1 <3.9",

Then I deleted my package-lock.json and run :

npm install

Now you should be able to install date-fns and use 'type' => 'time' correctly with Symfony. Have a look at the link, I detailed the whole manipulation for me. I hope it will help you.