Sucking at using Chart.js, chartjs-adapter-luxon, and luxon

Ask us anything How do I?
1

Has anyone successfully used chartjs-adapter-luxon and luxon to do what I’m trying to do? (or maybe there’s a different way to solve this problem?)

I built a chart using the Chart.js plugin which I documented in this thread.

The y-axis is a numeric value while the x-axis is categorical (meaning the dates do not proportionally correspond to the tick marks and, in fact, there may be two of the same dates next to each other). The x values are strings in ISO date format (e.g. “2025-01-31”).

What I’d like, instead, is for the x-axis to display the month (like January-2025, then February-2025, etc) and for the points to land proportional to the date value. For example, a point with x value “2025-01-03” would be closer to the January-2025 tick mark than a point with x value of “2025-01-31”.

I am trying to figure this out using luxon and chartjs-adapter-luxon but it’s currently not working and I believe it’s because WeWeb may not be registering the chartjs-adapter-luxon date adapter (see error below)
image

What I’ve tried so far:

  1. Using the NPM plugin to install luxon and chartjs-adapter-luxon
  2. Using the instructions discussed on Convert Your Custom Tags to WeWeb Actions to create a workflow that loads the custom JavaScript from that website
  3. Forcing the adapter manually using Custom Code > Head:
<script>
  window.addEventListener("load", () => {
    if (window.Chart && window.luxon && window['chartjs-adapter-luxon']) {
      Chart._adapters._date = window['chartjs-adapter-luxon'];
      console.log("Manually registered Luxon adapter with Chart.js");
    }
  });
</script>
2

@Micah has some nice charts in stackpack.io, they even resize on page resizing. In my experience ChartJS is a terrible lib to work with.

3

Thanks, @Broberto! I checked out stackpack.io, super interesting although I didn’t find a scatter plot that i needed. I did request it though so maybe it will come.

Coming back to the original question, do you know if there’s some issue with chartjs-adapter-luxon not loading? Searching hasn’t yielded anything magical, unfortunately.