[Solved]-Html5 line chart with a different color when out of area range-Highcharts

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