[Solved]-Highchart Area Range chart with gradient that follows the line-Highcharts

The difficulty is the granularity: Highcharts draws one single SVG path for the series' points, and associates that one path with the gradient. If your series data is relatively linear however, the following approximation might be useful. See the jsfiddle that I've created:

Assuming that your series data is not static, my demo includes two series and a function that, for each series, attempts to dynamically create the linearGradient that comes closest to your requirement:

function getLinearGradient(series) {
    var lastY0=null, lastY1=null, maxY0=null, maxY1=null;
    $.each(series.data, function(key,value) {
        maxY0 = Math.max(value[1],maxY0);
        maxY1 = Math.max(value[2],maxY1);
        lastY0 = value[1];
        lastY1 = value[2];
    });
    var firstY0 = series.data[0][2],
        firstY1 = series.data[0][2]
    ;
    var minY0=maxY0, minY1=maxY1;
    $.each(series.data, function(key,value) {
        minY0 = Math.min(value[1],minY0);
        minY1 = Math.min(value[2],minY1);
    });
    var minY = minY0,
        maxY = maxY1,
        heightY = maxY - minY
    ;        
    var gradient = {
            x1: 10 + ( ((firstY0-minY) / heightY) * 80 ) + "%",
            y1: "10%",
            x2: 10 + ( ((lastY1-minY) / heightY) * 80 ) + "%",
            y2: "90%"
    };
    return gradient;
};

Of course, this approach is not a full-blown solution and only useful if you're dealing with data that approximately follows a linear curve. Here's the jsfiddle