Fixed position axis labels in Flot chart

Question

I have a Flot chart which is very large in height, so when a user scrolls half-way down the page they can no longer see the x-axis tick labels.

Is there a way to make the axis labels position:fixed, so that when a user scrolls, the axis labels remain visible? Or at the least, is there a way to wrap the x-axis tick labels in a div so that I can control the position through this div wrapper?

Answer 1

The labels are already grouped in a div element. You can use

div.flot-x-axis {
    position: fixed !important;
}

but this also leads to a shift in the postion of the labels which you have to correct.

See this example fiddle.

Answer 2

I found a nice solution for this, so I will post an answer to my own question.

Basically what I ended up doing was wrapping my placeholder div inside another div with a reduced height. Then I set the wrap div to use scrollbars so I can scroll the chart. Then I add some CSS dynamically to the tick labels to make them position:fixed and move them in to their correct place.

My placeholder div along with wrapper:

<div style="position:absolute;left:275px;top:200px;width:1250px;height:600px;overflow-y:scroll;">
<div id="placeholder" style="width:1150px;height:3410px;"></div>
</div>

My dynamic CSS additions:

$(".flot-text .flot-x1-axis").css("position","fixed");
$(".flot-text .flot-x1-axis").css("top","80px");
$(".flot-text .flot-x1-axis").css("left","300px");
$(".flot-text .flot-x1-axis .flot-tick-label").css("background-color","white");
$(".flot-text .flot-x1-axis .flot-tick-label").css("width","70px");