Plotly tick labels misaligned in stacked horizontal bar chart - reactjs

Question

I am having trouble getting the yaxis tick labels to align to the bars properly when stacking horizontal bars by using base (my use case is a timeline view so i need empty spaces in between the stacked bars, thus why i am using base)
here is a codepen showcasing the issue: https://codepen.io/dan-wiegand/pen/GRMwKGP?editors=0010
var data = [{
type: 'bar',
x: [0, 10, 10, 0],
base: [0, 10, 20, 30],
y: ['trace 1', 'trace 1', 'trace 1', 'trace 1'],
orientation: 'h'
}, {
type: 'bar',
x: [0, 10, 0, 10],
base: [0, 10, 20, 30],
y: ['trace 2', 'trace 2', 'trace 2', 'trace 2'],
orientation: 'h'
}, {
type: 'bar',
x: [10, 0, 10, 0],
base: [0, 10, 20, 30],
y: ['trace 3', 'trace 3', 'trace 3', 'trace 3'],
orientation: 'h'.
}];
const layout = {
yaxis: {
showgrid: true
}
};
Plotly.newPlot('myDiv', data, layout);
(code required to post codepen link)
for those familiar with flex box, it's visually like the difference between space-around and space-between (bars being space between and ticks being space around)
My issue is visible below
and here it is in my actual case - if they all looked like "Copy Valence" that would be perfect
i dont care if the labels are along the axis lines or in the empty spaces, as long as the labels and the bars are aligned! In a perfect world the chart would be aligned like below, with the tick labels in the space between the ticks and the bars between ticks

Answer 1

question is tagged with python and javascript. Solution on python but concept same across languages
for each trace use a separate yaxis y, y2, y3
in layout set domain of each yaxis
import plotly.graph_objects as go
data = [
{
"type": "bar",
"x": [0, 10, 10, 0],
"base": [0, 10, 20, 30],
"y": ["trace 1", "trace 1", "trace 1", "trace 1"],
"orientation": "h",
"yaxis": "y",
},
{
"type": "bar",
"x": [0, 10, 0, 10],
"base": [0, 10, 20, 30],
"y": ["trace 2", "trace 2", "trace 2", "trace 2"],
"orientation": "h",
"yaxis": "y2",
},
{
"type": "bar",
"x": [10, 0, 10, 0],
"base": [0, 10, 20, 30],
"y": ["trace 3", "trace 3", "trace 3", "trace 3"],
"orientation": "h",
"yaxis": "y3",
},
]
go.Figure(data).update_layout(
{
ax: {"showgrid": True, "domain": [i * 0.33, (i + 1) * 0.33]}
for i, ax in enumerate(["yaxis", "yaxis2", "yaxis3"])
}
)