Using adapter for date formatting (date-fns, moment or luxon) without require - ESM?

[exetico]

Describe the bug
I'm unable to use ChatjsNodeCanvas with a Chart.js adapter like date-fns. I've tried with date-fns, moment and luxon with no luck.

I've tried to search through the issues, but all workaround are with require usage.

Have I just missed something, or can't I use this with a adapter, if I'm unable to use require? (ES Module)

I'd really like to use a date adapter, as I'm normally during in front-end Chart.js :-).

Or is rendering through NodeJS just a thing I can do nativly in Chartjs 4, or? I've not found anything useful by searching around the topic, but maybe I've missed some important facts, or search keywords.

Versions

• NodeJS version: v18.18.1
• ChartjsNodeCanvas version: 4.1.6
• Chart.JS version: 3.7.1 (Not 3.5.1, as we're using chartjs-plugin-annotation which has known bugs prior to 3.7, but I've tested with 3.5.1 too)
• Typescript version (if applicable): Normal JavaScript

Additional context

I'm facing the classic Error [ERR_REQUIRE_ESM]: require() of ES Module, and I'm trying to get ChartjsNodeCanvas to work with a date adapter, but I've not found a way to do so.

[petrovi4]

Hi @exetico !
Did you manage to solve the problem? I ran into her too (

[exetico]

Regrettably, @petrovi4, I wasn't able to find a straightforward solution despite extensive research and various attempts.

I resorted to a workaround.

I manually generated date strings for my X-axis, ensuring that every possible timestamp from Y1, Y2, and Y3 was included in my "timestamp" array before generating the timestamps.

Subsequently, I generated null data points for my Y-axes to fill in the gaps, given that Y1, Y2, and Y3 had different data frequencies.

For instance, if Y1 had timestamps: 1242, 1342, 1443 and Y2 had 1261, 1361, 1561, I combined and sorted these to create a comprehensive X-axis timestamp series: 1242, 1261, 1342, 1361, 1443, 1561. I'll spare you the details for Y3 😁.

Here's a simplified example:

let timestamps = [...Y1_timestamps, ...Y2_timestamps, ...Y3_timestamps];
timestamps = [...new Set(timestamps)]; // Remove duplicates
timestamps.sort(); // Sort timestamps in ascending order

Then, for each timestamp in timestamps, I added a {x: time, y: null} to each Y dataset.

To ensure that the null data points in Y1, Y2, and Y3 were accounted for in the line plots, I set spanGaps: true for each dataset.

This solution might seem unconventional, but it served my purpose while we await a more elegant fix or suggestion. I'm confident there are other workarounds, but this one worked as expected for my case. I couldn't achieve the desired result without the null data points. Perhaps playing around more with spanGaps could have yielded a different outcome, but that's a task for another day.