I used a library chartjs3.9. I want to render some graphics with dynamic data, but I don’t know why the data is not being rendered. Here is my code:

the result for request to db is for example: b2b:[10,20,30],b2c:[10,20,30] a plus I that I’ll can put the labels for dynamic result, for example if the user get all month or a week the labels should be corresponding with it

<template> 
      <div>
        <input class="border border-gray-300 w-full text-center cursor-pointer rounded"  ref="flatPickr" id="flatPickr" placeholder="Ingresa el rango"/>
        <ChartsBar :data="returnValuesFiltered" :options="returnValuesFilteredOptions" />
        <p>total</p>
        <p v-for="total in clients.b2c">{{total.total}} </p> 
        <p>i:{{iterateOnClients }}</p>
      </div>
    </template>

    <script>
    import { mapState } from 'vuex';
    export default {
      name: 'StaticFilter',
      data() {
    return {
      loading: false,
      initLoading: false,
      messages: {
        error: 'Ha ocurrido un error en la carga',
        success: 'La carga ha ocurrido exitosamente'
      },
      load: {
        fromDate: null,
        toDate: null
      },
      chart: {
        data: {
          labels: [],
          datasets: [
            {
              label: 'Ventas B2C',
              backgroundColor: '#ff825e',
              data: [],
              order: 2,
            },
            {
              label: 'Ventas B2B',
              backgroundColor: '#0AB5FF',
              data: [],
              order: 1,
            },
          ]
        },
        options: {}      
      },
      clients: {
        b2b: [],
        b2c: []
      }    
    }
      },
      computed: {
    ...mapState({ glLaundries: state => state.glLaundries }),

    current_country_id() {
      return this.glLaundries.current_country?.countryCode;
    },

    current_state_id() {
      return this.glLaundries.current_state?.id;
    },

    current_city_id() {
      return this.glLaundries.current_city?.id;
    },  
    iterateOnClients() {
      return this.clients.b2c.map(client => client.total);
    },  
    iterateOnCustomers() {
      return this.clients.b2b.map(client => client.total);
    },  
    returnValuesFiltered() {
      return {
        labels: ['prueba','prueba','prueba','prueba',],
        datasets: [
          {
            label: 'Ventas B2C',
            backgroundColor: '#ff825e',
            data: [this.iterateOnClients[0],this.iterateOnClients[1],this.iterateOnClients[2],this.iterateOnClients[3]],
            order: 2,
          },
          {
            label: 'Ventas B2B',
            backgroundColor: '#0AB5FF',
            data: [            
              4,5,6,7
            ],
            order: 1,
          },
        ],
      };
    },
    returnValuesFilteredOptions() {
      return {
        plugins: {
          legend: {
            display: false,
          },
        },
      };
    }
      },
      methods: {
    async filterByRange() {
      try {
        let dbRef = this.$fire.firestore
          .collection('glLaundries')
          .doc(this.current_country_id)
          .collection('states')
          .doc(this.current_state_id)
          .collection('cities')
          .doc(this.current_city_id)
          .collection('orders')
          .where('createdAt', '>=', this.load.fromDate)
          .where('createdAt', '<=', this.load.toDate);

        const snapshot = await dbRef.get();
        let orders = [];
        snapshot.forEach(order => {
          orders = [...orders, { ...order.data(), id: order.id }];
        });
        orders = orders.filter(order => parseFloat(order.total) >= 0);
        this.pushBeetwenClient(orders);
      } catch (e) {
        this.$toastr.error(this.messages.error)
        console.log(e)
      } finally {

      }
    },
    transformData(data) {
      let labels = [];
      let datasets = [];
      data.forEach((item, index) => {
        labels.push(item.name);
        datasets.push(item.total);
      });
      this.chart.data.labels = labels;
      this.chart.data.datasets = datasets;
    },
    pushBeetwenClient(order) {
      order.forEach(order => {
        if (order.isB2B === !true) {
          this.clients.b2c.push(order);          
        } else {
          this.clients.b2b.push(order);
        }
      });
    }
      },
      async mounted() {
    const interval = setInterval(() => {
      if (!!this.$refs.flatPickr) {
        clearInterval(interval);
        this.$flatpickr(this.$refs.flatPickr, {
          enableTime: false,
          mode: 'range',
          dateFormat: 'd/m/Y H:i',
          defaultHour: 15,
          onChange: dates => {
            if (dates.length > 1) {
              this.load.fromDate = dates[0];
              this.load.toDate = dates[1];
              this.filterByRange();
            }
          }
        });
      }
    }, 1000)
  }
}
</script>