flot horizontal bars go 100% of the chart width

Question

Is there any way in to stop the horizontal bars to go 100% of the width ?

var d1 = [];
for (var i = 0; i <= 10; i += 1)
    d1.push([parseInt(Math.random() * 30),i]);


var d2 = [];
for (var i = 0; i <= 10; i += 1)
    d2.push([parseInt(Math.random() * 30),i]);

var d3 = [];
for (var i = 0; i <= 10; i += 1)
    d3.push([parseInt(Math.random() * 30),i]);

    $.plot($("#placeholder"), [ d1, d2, d3 ], {
        series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true }
        }
    });

A demo jsfiddle here

Answer 1

Look at autoscaleMargin property of xaxis:

The "autoscaleMargin" is a bit esoteric: it's the fraction of margin that the scaling algorithm will add to avoid that the outermost points ends up on the grid border. Note that this margin is only applied when a min or max value is not explicitly set. If a margin is specified, the plot will furthermore extend the axis end-point to the nearest whole tick. The default value is "null" for the x axes and 0.02 for y axes which seems appropriate for most cases.

So in your example:

        $.plot($("#placeholder"), [ d1, d2, d3 ], {
        xaxis:{autoscaleMargin:0.1},
        series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true }
        }
    });