Labels are off-centered with multiple datasets are used

[dostarora97]

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Live Example: https://codepen.io/dost25/pen/MWmVJwR

const labels_Ex1 = ['-90', '-60', '-30', '-14', '-7', '0', '7', '14', '30', '60', '90'];
const data_Ex1 = {
    labels: labels_Ex1,
    datasets: [
        {
            label: 'Dataset 1',
            data: [
                {x: '-90', y: 10},
                {x: '-60', y: 20},
                {x: '-30', y: 30},
                {x: '-14', y: 75},
                {x: '-7', y: 95}
            ],
            backgroundColor: 'green'
        },
        {
            label: 'Dataset 2',
            data: [
                {x: '0', y:  245}
            ],
            backgroundColor: 'blue'
        },
        {
            label: 'Dataset 3',
            data: [
                {x: '7', y: 60},
                {x: '14', y: 45},
                {x: '30', y: 30},
                {x: '60', y: 20},
                {x: '90', y: 10}
            ],
            backgroundColor: 'red'
        }
    ]
};
const config_Ex1 = {
    type: 'bar',
    data: data_Ex1,
};

Context

I want to have 3 kinds of bars in my bar-chart, where each kind is colored with a different color and different dataset-label.
Here I've following 3 kinds of Bars:

• Color: green, Label: Dataset 1
• Color: blue, Label: Dataset 2
• Color: red, Label: Dataset 3

But when I build my dataset in the given manner the bars are not centered for x-label.
I think this happens because the chart.js library tries to fit bars of Dataset-2 & Dataset-3 among the bars of Datset-1, and so that's why the get shifted.

Ideally if the x-label is different each bar should be placed in their own x-labels, but I think this is not happening.

Environment

• Chart.js version: Latest (3.5.0) (Check codepen link above)
• Browser name and version: Chrome, Firefox
• Link to your project: Private

[kurkle]

You are looking for the stacked option of the x-axis: https://codepen.io/kurkle/pen/qBmoRJj