jQuery flot time series axis ticks overflowing the chart border

Question

I have a jQuery flot chart with a time series where the first x-axis tick is misaligned (overflows outside the chart border). The chart has custom ticks showing dates.

jsfiddle

var options = {
    xaxis: {
        mode: "time",
        timeformat: "%Y-%m-%d",
        ticks: [1372636800000, 1372723200000, 1372809600000] 
    },
    yaxis: {
        tickLength: 0
    },
    legend: {
        show: false
    }
};

var readings = [
    {
        "label": "Trend 1",
        "data": [
            [
                1372636800000, //Mon, 01 Jul 2013 00:00:00 UTC
                2.65
            ],
            [
                1372723200000, //Tue, 02 Jul 2013 00:00:00 UTC
                0.13
            ],
            [
                1372809600000, //Wed, 03 Jul 2013 00:00:00 UTC
                0.51
            ]
        ]
    },
    {
        "label": "Trend 2",
        "data": [
            [
                1372636800000, //Mon, 01 Jul 2013 00:00:00 UTC
                2.19
            ],
            [
                1372723200000, //Tue, 02 Jul 2013 00:00:00 UTC
                1.56
            ],
            [
                1372809600000, //Wed, 03 Jul 2013 00:00:00 UTC
                1.42
            ],
        ]
    }
]

$(function () {
    $.plot($("#chart"), readings, options);
});

enter image description here

To my knowledge the timestamps correctly represent UTC YYYY-MM-DD 00:00:00.

What causes the misalignment? How do I fix this?

Good question in general, but I don't understand why you've circled that spot on the Y-axis. Is your concern that the 2 in 2013-07-1 is too far to the left? — Ryley
@Ryley - yes. The 2013-07-01 axis tick is too far to the left, and outside the chart border. The data point seems to be inside the border. But they both have the same timestamp value. — mtmacdonald
It seems to me that the x-axis tick is just centered on the bold border of the chart. If you don't want it to extend so far to the left, just make the tick label slightly smaller? — Ryley

Raidri Raidri · Accepted Answer · 2013-08-13T21:57:06

The line to the left of the chart border is not the first x-axis tick (you can see that when you change the first tick to e.g. 1372642800000).

The line belongs to the y-axis ticks, which you made so small that they are not visible. If you change the y-axis tickLength to 3 you see the ticks on the thin line. If you change the tickLength to more than 5 you only see the ticks themselves and the line is gone. (For additional stylings check out tickLength: null or negative values.)

To get invisible ticks without the line you can use tickLength: 6, tickColor: 'white'. Updated Fiddle

jQuery flot time series axis ticks overflowing the chart border

1 Answers