Spline chart gradient fill

Question

I am using Highcharts for the first time and it seems pretty impressive. However I am trying to achieve something similar to:

Is it possible by using Hightcharts? I know you can add gradients to pie charts, however I can't find anywhere how do I achieve that. Can I set background image to the chart?

Answer 1

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.