2 Bar and 2 Line chart are not aligning with each other.

### Expected behavior

**Code block**
```
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
```

````
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: '1',
type:'line',
data: [65, 9, 80, 81, 56, 55, 40],
backgroundColor:'rgba(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
yAxisID: 'y',
stack:'a'
},
{
type:'line',
label: '2',
data: [24, 15, 88, 34, 23, 44, 66],
backgroundColor:'rgba(255, 199, 132)',
borderColor: 'rgb(255, 199, 132)',
borderWidth: 1,
stack:'a'
},
{
label: '3',
data: [34, 13, 65, 34, 76, 24, 23],
backgroundColor:'rgb(0, 199, 132)',
borderColor: 'rgb(0, 199, 132)',
borderWidth: 1,
pointStyle:'line',
yAxisID: 'y'
},
{
label: '4',
data: [67, 56, 58, 65, 97, 65, 33],
backgroundColor:'rgb(100, 22, 255)',
borderColor: 'rgb(100, 22, 255)',
borderWidth: 1
}
]
};
````

The line and bar to be in same line.


### Current behavior

Line dots fall between the two bars.


### Reproducible sample

https://codepen.io/topratiksharma/pen/wvNOxBK

### Optional extra steps/info to reproduce

https://codepen.io/topratiksharma/pen/wvNOxBK

### Possible solution

_No response_

### Context

_No response_

### chart.js version

v4.4.1

### Browser name and version

edge

### Link to your project

_No response_