Множественный порог в Highcharts

На самом деле я пытаюсь использовать HighCharts для отображения нескольких пороговых значений.

Вот часть моего кода.

Особенно здесь:

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]
                ]
            }
         });
    }        

На самом деле есть два порога, один на 0 и один на 3.

Для точек порог правильный (отображается синяя точка, поскольку ее значение находится в диапазоне от 0 до 3, а значение ее цвета — ColorMiddle).

Однако для кривой и области значения colorMiddle не отображаются, потому что я не знаю, как добавить их на график серии.

Я думаю, что я должен использовать translationThreshold2 с series.yAxis.translate(threshold2) и добавить их в series.area.attr, но я не знаю, как именно.

У кого-нибудь есть идея?

РЕДАКТИРОВАТЬ1: мне удалось отобразить пороговую линию (синим цветом на приведенном ниже примере), но область заполнена неправильно. Область должна быть синего цвета в диапазоне от 0 до 300 и зеленого цвета (он же colorAbove, а не colorMiddle).

Результат отображается здесь: http://jsfiddle.net/LeLwu/27/ (это бывает отличается в Chrome и Firefox...)