ChartJS : represent data over timeslots

I’ve been looking everywhere but I cannot find the solution to my problem.
I have a dataset like so : {“2023-03-31T00:00:00”: [“B”, “C”], “2023-03-31T00:20:00”: [], “2023-03-31T00:40:00”: [], …}
Each timestamp is 20 minutes after the previous one and associated with a array of elements. I need to bar graph the size of the array over time.

My problem is : each datapoint is actually representing a number of element over a timeslot starting from the timestamp and ending 20 minutes later, so for example, the first bar would amount to 2 (two elements in the array) but has to fill the space between the 00:00 and 00:20 ticks on my X Axis.

The midnight bar is centered over 00:00

I didn’t find any solution that works for me. Everything I tried centers the bar on the timestamp but in my case I would like to have the left of the bar clip to the timestamp.

I’ve tried changing the alignment of the labels, setting the grid offset to true or false, “cheating” with a 10 minutes time offset on the labels (half of my timestep). Everytime it turned out to be too complicated or not conclusive.

Is there a simple way to achieve what I want, which is moving all the bars half of their size to the right, i.e. cliping the left edge to the label of the datapoint.

I’m lost right now so any help would be much appreciated.

Here is the current config of my graph :

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'hour',
                displayFormats: {
                    'hour': 'HH:mm'
                },
            },
            min: new Date("2023-03-31T00:00:00Z"),
            max: new Date("2023-04-01T00:00:00Z"),
            grid:
            {
                offset: false,
            },
        },
        y: {
            min: 0,
            ticks:
            {
                stepSize: 1,
            }
        }
    },
    plugins: {
        legend: {
            // Removes the colored rectangle next to the dataset label
            labels: {
                boxWidth: 0,
            },
            // Removes the ability to hide the dataset on click on the label (makes no sense since we only have one
            // dataset)
            onClick: null,
        },

        tooltip: {
            // Removes the colored squared on the tooltip label
            displayColors: false,
            callbacks: {
                // Using our custom tooltip labels
                label: tooltipLabel,
                title: tooltipTitle,
            },
        },
    },
  }
};

Cheers,
Prims