As far as I know there is no way to stack a single series against itself. With that said here's my 5 min attempt to replicate your image:
As @DNS had suggested, I used a transparent
middle series to space the complete/estimated bars. To keep it easier to track where the points belong, I added each bar as it's own series.
Fiddle is here.
var data = [];
// 10 passes
data.push({data:[[40,2]], color: 'green'});
data.push({data:[[40,2]], color: 'transparent'});
data.push({data:[[20,2]], color: 'silver'});
// 100 passes
data.push({data:[[50,1]], color: 'green'});
data.push({data:[[20,1]], color: 'transparent'});
data.push({data:[[30,1]], color: 'silver'});
// 1000 passes
data.push({data:[[70,0]], color: 'green'});
data.push({data:[[20,0]], color: 'transparent'});
data.push({data:[[10,0]], color: 'silver'});
$.plot($("#placeholder"), data, {
series: {
stack: true,
lines: { show:false },
bars: { show: true, horizontal:true, barWidth: 0.6 }
},
xaxis: {min: 0, max: 100, ticks: [[0, '<span style="color: green">Completed<br/>0%</span>'],[100, '<span style="color: gray">Estimated End Point<br/>100%</span>']]},
legend: {show: false},
yaxis: {tickColor: 'transparent',position: 'right',
ticks: [[0.25,'as of 1000 passes'],
[1.25,'as of 100 passes'],
[2.25,'as of 10 passes']]}
});