Flot charts: markings z-index?

Question

Is there any way to access and manually set the z-index (for lack of better word) of the markings lines in a flot chart? Right now I am creating some markings on a line chart to use as thresholds (basic horizontal lines set to a specific value) and it's working great except when the markings happen to be lined up perfectly with the chart's grid lines. When that happens the grid line overlaps the marking line so it's hard to see the marking line. What I would like to do is manually set the marking line to be on top of the grid lines, but I can't figure out where to set that option (or if it's even possible).

Here is the markings array that I am creating (dynamically):

markings: [ { y2axis: {from: -20, to: -20}, color: "#848484", lineWidth: 2.5 },{ y2axis: {from: -12, to: -12}, color: "#848484", lineWidth: 2.5 } ]

Here is an image of the result (you can see the threshold at -12 is buried under the chart's gridline and appears almost like 2 thinner lines):

Thanks for any help or advice you can offer!

Answer 1

When drawing on the canvas there is no z-order. What is drawn later is drawn over older stuff. And when you look at the flot code (in the drawGrid() function) you see that the markings are drawn first.

There are a few different solutions / work-arounds here:

1. You make a local copy of the jquery.flot.js file and change the code so that the markings are drawn last in the drawGrid() function.
2. You remove the markings and instead generate a simple data series with the two endpoints and add it to your dataset (preferably before your real data series). Then your markings data series is drawn after the grid and before your real data series.
3. You draw the markings manually after flot draws the grid and before flot draws the plot for the data. (See the documentation.)