Accepted answer

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(, function(key,value) {
        maxY0 = Math.max(value[1],maxY0);
        maxY1 = Math.max(value[2],maxY1);
        lastY0 = value[1];
        lastY1 = value[2];
    var firstY0 =[0][2],
        firstY1 =[0][2]
    var minY0=maxY0, minY1=maxY1;
    $.each(, 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


I don't have any example, nor do I know for sure if it is already in the specifications, but I am pretty sure the only way to accomplish this effect would be using svg mash gradients.

You could use the path points as boundary points for the mash matrix and get the effect you want.

See here for further information.

Related Query

More Query from same tag