[Solved]-Spline chart gradient fill-Highcharts

it is possible to set a background image or gradient using:

chart: {
        type: 'line',
        plotbackgroundimage: 'http://www.highcharts.com/demo/gfx/skies.jpg'
    },

or

chart: {
        type: 'line',
        plotbackgroundcolor: {
            lineargradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
            ]
        }
    },

http://api.highcharts.com/highcharts#chart.plotbackgroundimage or http://api.highcharts.com/highcharts#chart.plotbackgroundcolor

however, this is the background to the plot area, not to the line itself. to give the line a graduated color, you can specify the color of the series as a gradient. e.g.

  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: {
            lineargradient: [0, 0, 0, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]
        }
    }]

http://jsfiddle.net/wxqm9/

the syntax for lineargradients are:

lineargradient: [x1, y1, x2, y2]

creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).

 stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]

this specifies two points in the gradient and the colours to use. in this case, the gradient will go from (255,255,255) at the start to (100, 100, 155) and the end. if you specified 3 stops, then you can make the gradient go from one colour to another at the middle, to another at the end. hope this helps. i suggest you just try playing around with this in the jsfiddle i posted to see how it works.