ChartJS in LWC with luxon adapter

Question

I am using ChartJS version 4.3 to draw a chart in an LWC component - this works well. I have LWS enabled (not locker).

I would like to use a 'time' based x axis scale to present data with relative spacings between datapoints.

According to the docs I need to use a date library to make this work. I'm not fussy about which one I use but I chose luxon and the matching luxon adapter.

The library and adapter appear to load without issue, I take care to make sure the libraries are loaded before loading the adapter

   import ChartJS from '@salesforce/resourceUrl/chartjs_v43';
   import DateTime from '@salesforce/resourceUrl/luxon3x';
   import LuxonAdapter from '@salesforce/resourceUrl/luxonadapter';
  
  ...
           
   renderedCallback() {
    if (this._baseChartInitialized) {
        return;
    }
    this._baseChartInitialized = true;
    Promise.all([   
            loadScript(this, ChartJS),
            loadScript(this, DateTime)
        ]).then(() => {        
            // load the time adapter and library
            this.loadAdapter();
        }).catch(error => {
            console.error(error);
        });  
}

loadAdapter = async () => {
    try{
        await loadScript(this, LuxonAdapter);
        this._chartjsLoaded = true;
        // try to draw the chart
        this.drawChart();
    } catch(error){
        console.error(error);
    };  

}

but when I set the x-axis type to 'time'

                    this.chart = new Chart(ctx, 
                    {
                        type: 'line',
                        data: {
                            labels : this.chartLabels,
                            datasets: this.chartDatas
                        },
                        options: {
                            scales: {
                                x: {
                                    type: 'time'
                                }
                            }                                
                        }
                    }
                );

I get an error indicating the adapter is not loaded

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

Can anyone help me out with this? I think maybe I need to edit the adapter to correctly recognize and load the libraries in LWC, but I'm not sure exactly what to do!

Answer 1

Your code looks just fine at first glance, so I suspect there may be a race condition lurking outside of the code you posted here. I replicated your setup, but used connectedCallback, and it worked the first time. Here's the lines of code I used to start off:

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import Luxon from "@salesforce/resourceUrl/Luxon";
import ChartJS from "@salesforce/resourceUrl/Chart";
import Adapter from "@salesforce/resourceUrl/ChartLuxonAdapter";

export default class ChartLuxonDemo extends LightningElement {
  async connectedCallback() {
    await loadScript(this, Luxon);
    await loadScript(this, ChartJS);
    await loadScript(this, Adapter);
    this.loadChart();
  }
  // ...
}