How to group data by label and date in ticks of 30 minutes in ChartJS?

Question

I'm trying to show my Data in ChartJS where the data must be shown divided by datasets of time in ticks by 30 minutes where in each dataset i must have different types of labels, the data is showing which kind of payment is used the most during a day and which less.

The issue is that i don't know how should that data be set in the Chart, by trying to add x property in data i just have a huge dataset where instead of showing tooltip like 'POS MANUALE - CONTANTI - NON RISCOSSO' for every tick i see it for all ones, and how should the time be grouped?

Here is my code:

const optionsPagamentiBar = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      mode: "index",
      intersect: 0,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": " + "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    }
  },
  scales: {
    y: {
      ticks: {
        display: true,
        beginAtZero: true,
        fontSize: 10,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        drawBorder: false,
        zeroLineColor: "transparent",
      }
    },
    x: {
      display: 1,
      ticks: {
        padding: 10,
        display: true,
        fontSize: 10
      },
      grid: {
        display: false
      }
    }
  }
}

const chartBarPayments = new Chart(document.getElementById("chartBarPayments").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
    }]
  },
  options: optionsPagamentiBar
});

let dataFromAPI = [{
    "totpag": 675.71,
    "descrpag": "POS MANUALE",
    "data": "2022-02-03T08:23:03"
  },
  {
    "totpag": 1170.25,
    "descrpag": "CONTANTI",
    "data": "2022-02-03T08:32:12"
  },
  {
    "totpag": 20.31,
    "descrpag": "NON RISCOSSO",
    "data": "2022-02-03T09:21:17"
  },
  {
    "totpag": 306.1,
    "descrpag": "BANCOMAT",
    "data": "2022-02-03T09:36:51"
  },
  {
    "totpag": 96.44,
    "descrpag": "CONTANTI",
    "data": "2022-02-04T08:07:46"
  },
  {
    "totpag": 268.57,
    "descrpag": "POS MANUALE",
    "data": "2022-02-04T08:13:55"
  },
  {
    "totpag": 45.06,
    "descrpag": "BANCOMAT",
    "data": "2022-02-04T08:23:23"
  }
]

function pagamentiPerFascia(pagamenti) {
  /*  const colorScale = d3.interpolateSinebow;
    const colorRangeInfo = {
      colorStart: 0.2,
      colorEnd: 1,
      useEndAsStart: true,
    };
    let COLORS = interpolateColors(pagamenti.length, colorScale, colorRangeInfo);
  */

  let datasets = [];
  let labels = [];
  pagamenti.forEach((pagamento, i) => {
    if (pagamento.totpag !== 0) {

      labels.push(moment(pagamento.data).format("HH:mm"));
      let dataset = datasets.find(data => data.label === pagamento.descrpag)
      if (dataset) {
        dataset.data.push(pagamento.totpag)
        dataset.labels.push(labels[i])
      } else {
        datasets.push({
          label: pagamento.descrpag,
          data: [pagamento.totpag],
          labels: [labels[i]],
          //backgroundColor: COLORS[i]
        })
      }
    }
  })
  const data = {
    labels,
    datasets
  }
  chartBarPayments.data = data;
  chartBarPayments.update();
}

pagamentiPerFascia(dataFromAPI)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

<canvas id="chartBarPayments"></canvas>

What i'm looking to archieve is something like this:

The data from API is dynamic so i can have not only the three types of payments.

UPDATE:

I've changed the code where i normalized the data but still can't get how to set ticks in 30 by 30 minutes and the data is shown in wrong position