You are displaying your bars on separate axes:
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1,
type: "line"
},
3: {
type: "line"
}
So the first bar is on the left axis, the second is on the right axis. The first bar only shows because it is taller than the red bar in front of it. This is by design. If you want them to display stacked, change your code to this:
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 0
},
2: {
targetAxisIndex: 1,
type: "line"
},
3: {
targetAxisIndex: 1,
type: "line"
}
This will end up with this:
Note that your two axes no longer have equivalent size. Adjust other parameters as needed. If you want them side by side, you can put them on the same axis and remove isStacked: true
which will make them stand next to each other.
Note: This sort of chart is incredibly busy and is likely not good visualization practice. Regardless, if you need to create a chart, the above solution should work. If you actually mean that you want the smaller bar in front, then good luck with SVG editing.