How to center align horizontal bars with multiple datasets?

I've created a bar chart with a couple different datasets, and it works well. However, one dataset is bottom aligned, and the other is top aligned, allowing some minor overlap that would be prettier without. I'd like to just have the bars be centered, so it aligns with the text.

I've tried changing bar percentage, category percentage, and playing around with scales (stacked, align, etc).

my horizontal bar chart

const chartLoc = document.getElementById('chart').getContext('2d');
chart = new Chart(chartLoc, {
    type:'bar',
    data: jsonvar,
    options: {
        indexAxis: 'y',  
        layout: {
            padding: {
                right: 100
            }
        },
        plugins: {
            datalabels: {
                labels: {
                    label: {
                        anchor: "end",
                        align: "end",
                        clip: false,
                    }
                }
            }
        }
    },
    plugins: [ChartDataLabels],
});

My data is set up like this:

const jsonvar = {
    "labels":["Label 1","Label 2","Label 3","Label 4","Label 5","Label 6"],
    "datasets":[
        {
            "label":"Version 1",
            "data":[null,null,null,1,2,3]},
        {
            "label":"Version 2",    
            "data":[1,2,3,null,null,null]
        }
    ]
}

You should set skipNull: true so that the bar with value: null will not be rendered. Hence, the bars will be rendered centrally.

chart = new Chart(chartLoc, {
  ...,
  options: {
    ...,
    skipNull: true,
  },
  ...
});

Demo @ StackBlitz