Stacked bar with multiples bars widths

[miguelwycho]

I needed to create a stacked bar chart with multiple bars widths so i came with this solution:

chartJsOptions = {
type: 'bar',

    data: {
        labels: [],
        datasets: [
            {
                label: "Ofertado",
                data: [],
                borderColor: 'rgb(83,141,213)',
                borderWidth: 3,
                xAxisID: 'x-axis-2'

            },

            {
                label: '',
                data: [],
                borderColor: '#e26b0a',
                borderWidth: 3,
                xAxisID: 'x-axis-1'
                // yAxisID: '1',
            },

            {
                label: '',
                data: [],
                borderColor: '#961709',
                xAxisID: 'x-axis-3',
                borderWidth: 3,
            },

        ],
    }
    ,
    options: {
        scales: {
            xAxes: [

                {
                    stacked: true,
                },
                {
                    id: 'x-axis-2',
                    display: false,
                    type: 'category',
                    barThickness: 50,
                    stacked: true,
                },
                {
                    id: 'x-axis-3',
                    type: 'category',
                    display: false,
                    barThickness: 40,
                    stacked: true,
                },
                {
                    id: 'x-axis-1',
                    type: 'category',
                    display: false,
                    barThickness: 30,
                    stacked: true,
                }
            ],
            yAxes: [{
                stacked: false,

            }
            ]
        },
        title: {
            display: true,
            text: ''
        }
    }
};

the widths worked but the bars are out of place and i can't get it right.

any solution?