Remove gap on side of Flot chart?

Question

I have a Flot chart that I want to span 100% within its parent container. It works like I want as long as I have the xaxis show option turned off.

But once I turn it on, it adds a gap on the left (as you can see from the attached image). The right is fine.

Any ideas? Here are my grid and xaxis settings:

grid: {
  borderColor: 'transparent',
  hoverable: false,
  backgroundColor: 'transparent',
  minBorderMargin: 0,
  borderWidth: 0,
  margin: {
    top: 10,
    right: 0,
    bottom: 0,
    left: 0
  }
},
xaxis: {
  show: true,
  mode: "time",
  timezone: 'browser',
  timeformat: "%b",
  minTickSize: [1, "month"],
  reserveSpace: false,
  font: {
    size: 11,
  }
}

I'm using Flot version 0.8.2 with jQuery version 1.10.2.

Kristynkrock

your image is not displaying – Heroworship

Working fine for me. Here's a direct link: i.sstatic.net/8affH.png – Kristynkrock

oh, it was blocked by my network firewall, can u create a jsfiddle , jsfiddle.net – Heroworship

What version of Flot? – Sporogony

@Sporogony I'm using Flot version 0.8.2 with jQuery version 1.10.2. – Kristynkrock

@Kristynkrock This sounds like a bug. We fixed something similar in 0.8.2 involving the right side of the plot, but I wouldn't expect the same problem to affect the left. It should be measuring your label and only allocating extra space if the label extends beyond the edge of the canvas, which it doesn't here. Could you open a new issue at github.com/flot/flot/issues? – Sporogony

@Sporogony Done. github.com/flot/flot/issues/1212 – Kristynkrock

Answer 1

You can do with css. Just give margin-left to the class or id your chart. Something like this:

#chart{margin-left:-5px;}

I am just giving you margin-left:5px; You can adjust accordingly. hope it will help :)

Knickers