How to define the starting position of every bar in chartjs bar - chart.js

Question

I am trying to build a graph similar to the one in the image
but I can't find the right way to do it, I want to join the line with the bar on the same axis, and for every bar I want to define the starting Y position and the ending Y position, I tried to do it using multi axis but it didn't work, what I tried is something similar to this
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', July'],
datasets: [{
label: 'Sales',
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
},{
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};
const options = {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
gridLines: {
display: false
},
labels: {
show: true
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
display: false
},
labels: {
show: true
}
}
]
}
};
but this way, there will be two axes, one on the left and the other on the right side, but both start from the same position