Flot labels overlapping with my line graph

Question

I’m using the line graph feature of flot but I’m having some difficulty keeping my x and y-axis labels from overlapping onto the graph. My graph looks like this

Ideally, I would like to move the labels to the left and bottom so that they don’t overlap with the graph. I’m constructing the graph like so

$(function() {

<%
  js_data = []
  ids = []
  @user_my_objects.each do |user_my_object|
    ids.push( user_my_object.id )
    my_object_day_time_in_ms = user_my_object.my_object.day.strftime('%Q')
    js_data.push( "[#{my_object_day_time_in_ms}, #{user_my_object.time_in_ms}]" )
  end
%>
        // <%= ids %>
        var data = [<%=h js_data.join(",") %>];

        $("<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" },
                points: {
                        show: true
                },
                lines: {
                        show: true
                },
                grid: {
                      hoverable: true,
                      clickable: true,
                      tickColor: "#efefef",
                      borderWidth: 0,
                      borderColor: "#efefef"
                },
                tooltip: true
        });

        $("#placeholder").bind("plothover", function (event, pos, item) {
                if (item) {
                        var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                        console.log("x:" + x)
                        dateObj = new Date(parseInt(x))
                        var dateStr = $.datepicker.formatDate('MM dd, yy', dateObj)
                        $("#tooltip").html( dateStr + " - " + formatTime(y) )
                                .css({top: item.pageY+5, left: item.pageX+5})
                                .fadeIn(200);
                } else {
                        $("#tooltip").hide();
                }
        });

});

Edit: Alas the elusive Fiddle -- http://jsfiddle.net/edc8jd31/1/

Answer 1

Please add the following to your CSS:

#placeholder div.xAxis div.tickLabel {
    transform: rotate(0deg) !important;
    margin-top:10px;
}

#placeholder div.yAxis div.tickLabel {
    margin-right: 10px !important;
}

Output:

Answer 2

Starting form your fiddle, add translateY(15px) to the transform lines in the CSS and add labelHeight: 30 to the xaxisoptions. See the updated fiddle for the full example.

Explanation:
By using transform: rotate(45%) on the axis labels you rotate them around their centers which brings the left half above the axis. The additional translation moves the label below the axis. The labelHeight option is necessary so that the right half of the labels doesn't goes below the edge of the chart.