score:2

unfortunately it is not supported. the issue is that the line is drawn as a single path and can only have one color per path (except a gradient).

a few attempts resulted in changing color of individual points fiddle1 and another based upon a threshold apply a gradient to the stroke of the path

function applygraphgradient() {

    // options
    var threshold = 19,
        colorabove = '#f00',
        colorbelow = '#000';

    // internal
    var series = this.series[0], 
        i,
        point;

    if (this.renderer.box.tagname === 'svg') {

        var translatedthreshold = series.yaxis.translate(threshold),
            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 colors to the markers
    for (i = 0; i < series.data.length; i++) {
        point = series.data[i];
        point.color = point.y < threshold ? colorbelow : colorabove;
        if (point.graphic) {
            point.graphic.attr({
                fill: point.color
            });
        }
    }

    // prevent the old color from coming back after hover
    delete series.pointattr.hover.fill;
    delete series.pointattr[''].fill;

}

fiddle2, kudos to this question

one other possible solution is to programmatically split your data into 2 series one that is in range and one that is not. by colouring the not as red it may appear to be one line

            var inrange = array();
            var outrange = array();

            for(var i = 0; i < values.length; i++) {
                var range = limits[i];
                var value = values[i];

                if(value[1] > range[1] && value[1] < range[2]) {
                     inrange.push(value);
                     outrange.push([value[0],null]);
                }
                else {
                    outrange.push(value);
                    inrange.push([value[0],null]);
                }
            }

example, although as you can see they don't join together

update

managed to make it appear correctly

            var inrange = array();
            var outrange = array();

            var prev = 0; //1 = was valid, 2 = werent
            for(var i = 0; i < values.length; i++) {
                var range = limits[i];
                var value = values[i];

                if(value[1] > range[1] && value[1] < range[2]) {
                     inrange.push(value);


                    if(prev == 2) {
                        outrange.push(value);
                    }
                    else {
                        outrange.push([value[0],null]);
                    }
                    prev = 1;
                }
                else {
                    outrange.push(value);
                    inrange.push([value[0],null]);

                    if(prev == 1) {
                       outrange[i-1][5] = values[i-1][6];
                    }

                    prev = 2;
                }

                console.log(prev);
            }

example


Related Query

More Query from same tag