Chartjs: Double x axis not having the same gridline

Question

I am using Chart.js version 2.9.4 with jQuery version 3.2.1 and I use bar type of chart. What I want to achieve is to display one data bar in background (beige color) and two data bars in foreground (green and magenta color). The problem is, that with this settings I have, it displays it wrong - the x axis and gridlines are not aligned properly ( I just want to show one, but for debugging, there are two displayed in the picture).

My code for data and scales is:

var activityData = {
            datasets: [
                {
                    label: 'Monthly plan',
                    backgroundColor: '#a3b13a',
                    data: [14000, 12000, 14000, 15000, 15000, 16000, 12000, 10000, 15000, 16000, 17000, 20000],
                    xAxisID: 'x-axis-1',
                    barPercentage: 0.4
                }, {
                    label: 'Month sales',
                    backgroundColor: '#a51b4d',
                    data: [14200, 12800, 20100],
                    xAxisID: 'x-axis-1',
                    barPercentage: 0.4
                },{
                    label: 'Last year sales',
                    backgroundColor: '#f8f1e5',
                    data: [13250, 10965, 14520, 13789, 14085, 15796, 10367, 9513, 14302, 14985, 16997, 18622 ],
                    xAxisID: 'x-axis-2'
                }],
            labels: monthNames
        }

        var myScales = {
            xAxes: [{
                display: true,
                stacked: true,
                id: "x-axis-2",
                type: 'category',
                ticks: {
                    beginAtZero: true
                }
            }, {
                display: true,
                stacked: false,
                id: "x-axis-1",
                type: 'category',
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true
                }
            }]
        }

How can I solve this to display properly - one bar in background and two in foreground?

Answer 1

I figured it out, in case someone has the same issue, I had to add offset: true.

    var myScales = {
        xAxes: [{
            display: true,
            stacked: true,
            id: "x-axis-2",
            type: 'category',
            offset: true,
            ticks: {
                beginAtZero: true
            }
        }, {
            display: false,
            stacked: false,
            id: "x-axis-1",
            type: 'category',
            offset: true,
            gridLines: {
                display:false
            },
            ticks: {
                beginAtZero: true
            }
        }],
        yAxes: [{
            stacked: false,
            ticks: {
                beginAtZero: true
            }
        }]
    }