Chart.js Adapting different X axis with same scale

Question

Chart

Hi, I've got this two graphs where I have in the X axis a timestamp value. I want to stack them, however I don't know how to adjust the X axis.

How can I tell chart.js to spread the upper chart so that uses the same scale?

Here is a simplified version of the code inside , I put on comment the corresponding x value for every Y

const data = {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12],
    datasets: [
        {
            label: 'full data',
            //Xaxis = [1,2,3,4,5,6,7,8,9,10,11,12]
            data: [2,3,4,3,2,3,4,5,6,5,4,5],
            borderColor: ['rgba(75, 192, 192, 1)'], //green
            yAxisID: 'y1'
        },
        {
            label: 'stacked data',
            //Xaxis = [1,4,7,10]
            data: [2,3,4,3], //one every three points of full data, but they start from 1
            borderColor: ['rgba(255, 99, 132, 1)'], //red
            stepped: true,
            yAxisID: 'y2'
        },
    ]
}

const config = {
    type: 'line',
    data: data,
    options: {
        interaction: {
            intersect: false,
            mode: 'index',
        },
        pointRadius: 0,
        scales: {
            y1: {
                min:0,
                stack: 'demo'
            },
            y2: {
                min:0,
                stack: 'demo'
            },
        }
    }
}

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);

Edit: as suggested, I've changed the question so that is more comprehensible (I hope)