How do I make the left border of my flot graph align with the left-most vertical line?

I’ve created a graph with Flot (using jQuery 1.11). I’m having a problem trying to get the border of the grid aligned with the lines of the grid. As you can see in this Fiddle, the left edge / border of the graph does not overlap with the left-most vertical line of the graph. How can I get them to align? I created my Flot graph like so:

$(function() {
  var data = [[1403913600000, 2915000],[1437782400000, 2788000],[1466812800000, 2759000]];

  $("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body");

  $.plot("#placeholder", [data], {
    yaxis: {
      tickFormatter: formatTime
    },
    xaxis: {
      mode: "time",
      labelHeight: 30
    },
    points: {
      show: true
    },
    lines: {
      show: true
    },
    grid: {
      margin: 10,
      labelMargin: 5,
      labelWidth: 20,
      hoverable: true,
      clickable: true,
      tickColor: "#efefef",
      borderWidth: 2,
      borderColor: "#efefef"
    },
    tooltip: true
  });

Solution

Since your data points are spread over several years, Flot's automatic tick generation gives you one tick every three month (on the first of that month). The first tick on the x axis is on July 1st 2014 and the first data point is on June 28th 2014.

1) To get another tick on the edge of the chart you can define a mininmum value for the x axis on April 1st 2014 (and a maximum value on July 1st 2016) in the x axis options, the exact values depend on your timezone (here UTC+2), you may have to change them (updated fiddle):

xaxis: {
  mode: "time",
  labelHeight: 30,
  min: 1396275200000,
  max: 1467396000000
},

2) Another solution may be to define the ticks yourself (equal to your data point x values). Then you have only ticks where a data point is (updated fiddle):

xaxis: {
  mode: "time",
  labelHeight: 30,
  ticks: [1403913600000, 1437782400000, 1466812800000],
  timeformat: '%Y/%m/%d'
},