Hi all!

I am building al screen flow-enabled LWC to show a simple line chart (the evolution of a score), but this implementation is unable to pass the data gathered to the chart presentation... (labels and data are shown as "null")...

BC_puntajeActor (the presentation) JS:

import {LightningElement, wire, track} from 'lwc';
import getEstosDatos from '@salesforce/apex/BC_puntajeActor.getEstosDatos';
export default class BC_puntajeActor extends LightningElement {
   @track chartConfiguration;
   @wire(getEstosDatos, {})
   getEstosDatos({error, data}) {
   if (error) {
      this.error = error;
      console.log('error => ' + JSON.stringify(error));
      this.chartConfiguration = undefined;
   } else if (data) {
      let chartData = [];
      let etiquetas = [];
      data.forEach(ptj => {
         chartData.push(ptj.puntaje);
         etiquetas.push(ptj.fecha);
      });

      this.chartConfiguration = {
         type: 'line',
         data: {
            labels: etiquetas,
            datasets: [
               {
                     label:'Puntaje',
                     data: chartData,
                     borderColor:'rgba(62, 159, 222, 1)',
                     borderWidth: 1,
                     fill: false,
                     pointBackgroundColor: "#FFFFFF",
                     pointBorderWidth: 4,
                     pointHoverRadius: 5,
                     pointRadius: 3,
                     bezierCurve: true,
                     pointHitRadius: 10
               }
            ]
         },
      };
      console.log('data => ', data);
      this.error = undefined;
   }
   }
}

Chart.js (the config JS):
 

import {LightningElement, api, track} from 'lwc';
import chartjs from '@salesforce/resourceUrl/BC_ChartJs';
import {loadScript} from 'lightning/platformResourceLoader';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class Chart extends LightningElement {
 @api loaderVariant = 'base';
 @api chartConfig;

 @track isChartJsInitialized;
 renderedCallback() {
  if (this.isChartJsInitialized) {
   return;
  }
  // load static resources.
  Promise.all([loadScript(this, chartjs)])
   .then(() => {
    this.isChartJsInitialized = true;
    //c/chartconst ctx = this.template.querySelector('canvas.lineChart').getContext('2d');
    const ctx = this.template.querySelector('canvas');
    this.chart = new window.Chart(ctx, JSON.parse(JSON.stringify(this.chartConfig)));
   })
   .catch(error => {
    this.dispatchEvent(
     new ShowToastEvent({
      title: 'Error loading ChartJS',
      message: error.message,
      variant: 'error',
     })
    );
   });
 }
}

Apex class:
 

public with sharing class BC_puntajeActor {
    @AuraEnabled(cacheable=true)
    public static List<Data> getEstosDatos(){
        return BC_puntajeActor.obtenerDatosGrafico();
    }
    
    @RemoteAction
    public static List<Data> obtenerDatosRemotos(){
        return BC_puntajeActor.obtenerDatosGrafico();
    }
    
    public static List<Data> obtenerDatosGrafico(){
        List<Data> estosDatos = new List<Data>();
        // the code to query data an create the data list...
        return estosDatos;
    }
    public class Data {
        public Date fecha {get;set;}
        public Double puntaje {get; set;}
        public Data(Date fecha, Double puntaje) {
            this.fecha = fecha;
            this.puntaje = puntaje;
        }
    }
}

The chart is well shown within the screen flow, but labels and values are null (when I try hardcoding the values they're shown ok).

I'm lost... any help would be greatly appreciated!

Thx​​​​​​​