jQuery Flot: Set width of chart (without labels)

Question

Is there any way to set the actual size of the chart (without its labels)?

I have a container that is 880 pixels width and I'd like to have the chart extend exactly to that and have the axes rather stick out. Right now it's of course applying padding so that the axes can fit in the designated area.

I fiddled around with fixed labelWidth options and negative margins applied to the container but that didn't get me anywhere useful.

Answer 1

To make the axes stick out, you can set the labelWidth and labelHeight of the axes (y and x, respectively) to a negative value and give the container a margin, so there's enough room outside.

CSS:

#placeholder {
    border 2px solid red;
    margin: 30px;
}

Flot options:

var options = {
    xaxis: { labelHeight: -10 },
    yaxis: { labelWidth: -10 }
}

There is still a gap between the container border and the plot, as you can see in jsFiddle. You can control that with the grid's minBorderMargin property, but it doesn't completely hide the plot border, so you may want to set the grid's borderWidth to 0, or set borderColor. I updated the jsFiddle with that.