In combo chart draw line chart with offset: true and stepped from start to end

[fuvie]

Right now my chart look like this:

I don't want it to cut from start to end, I want it to look like this:

This is my code

        this.chart = new Chart(this.$refs.chart, {
            type: "bar",
            data: {
                labels: data.labels,
                datasets: data.datasets
            },
            options: {
                interaction: {
                    mode: 'nearest',
                    hoverBorderColor: "red"
                },
                maintainAspectRatio: true,
                scales: {
                    y: {
                        grace: '10%',
                        ticks: {
                            callback: (value) => formatValue(value, this.relative),
                        },
                    },

                    x: {
                        offset: true
                    },

                    xLine: {
                        axis: 'x',
                        offset: true,
                        display: false,
                        ticks: {
                            beginAtZero: true,
                        },
                    },

                    yLine: {
                        axis: 'y',
                        grace: '10%',
                        offset: false,
                        display: false,
                    }
                },

                onHover: (e, elems, chart) => {
                    const elements = chart.getElementsAtEventForMode(e, 'index', {}, true);

                    if (elements.length === 0) {
                        return;
                    }

                    const el = elements[0]

                    e.native.target.style.cursor = "pointer"
                },

                barPercentage: 0.8,
                categoryPercentage: 0.5, 
                maxBarThickness: 30,

                onClick: (e, clickedElements, chart) => {
                    const elements = chart.getElementsAtEventForMode(e, 'index', {}, true);
                    if (elements.length === 0) {
                        return;
                    }

                    const item = elements[0]
                    const { datasetIndex, index } = item;

                    const label = this.data.labels[index];

                    const queryInfo = {
                        label, datasetIndex, index
                    }

                    this.$emit('bar-click', queryInfo)
                },


                animation: {
                    onProgress: (params) => {
                        drawPoints(params, 'black', this.relative)
                    },
                },

                plugins: {
                    legend: {
                        display: false,
                    },
                    tooltip: {
                        enabled: false,
                    }
                }
            }
        });

I tried stretching line chart without offset, but then grid of bar chart and line chart is not symmetrical:

[fuvie]

Version of chart.js is 3.7.1