Multiple Threshold in Highcharts

Question

I'm actually trying to use HighCharts for displaying multiple threshold.

Here is the portion of my code.

Especially here :

var translatedThreshold = series.yAxis.translate(threshold1),
        y1 = Math.round(series.yAxis.len - translatedThreshold),
        y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2

    // Apply gradient to the path
    series.graph.attr({
        stroke: {
            linearGradient: [0, y1, 0, y2],
            stops: [
                [0, colorAbove],
                [1, colorBelow]
            ]
        }
     });

    // Apply gradient to the area
    if (series.area) {
        series.area.attr({
            fill: {
                linearGradient: [0, y1, 0, y2],
                stops: [
                    [0, colorAbove],
                    [1, colorBelow]
                ]
            }
         });
    }        

Actually, there is two thresholds, one on 0 and one on 3.

For the dots, the threshold is correct (a blue dot is displayed because its value is between 0 and 3 and its color value is ColorMiddle).

For the curve, and the area, the colorMiddle values are not displayed though, because I don't know how to add them on the series graph.

I think I must use a translatedThreshold2 with series.yAxis.translate(threshold2), and add them on the series.area.attr but I don't know how exactly.

Does anyone have an idea ?

EDIT1 : I managed to display the threshold line (in blue on the example below) but the area is not filled correctly. The area should be in blue between 0 and 300 and it's the color green (AKA colorAbove, and not colorMiddle).

Result is displayed here : http://jsfiddle.net/LeLwu/27/ (it happens to be different in Chrome and Firefox ...)