Set backgroundColor on half of the highchart area?

Question

Here's my fiddle: http://jsfiddle.net/highcharts/4rTBY/

chart: {
    renderTo: 'container',
    backgroundColor: {
        linearGradient: { x1: 0, y1: 0,  x2: 0, y2: 0 },
        stops: [
            [0, 'rgb(255, 255, 255)'],
            [0.5, 'rgb(200, 200, 255)']
        ]
    },
    type: 'line'
}

As we use backgroundColor whole background gets colored. I only want 50% of the background of the chart to get colored from the bottom.

Thanks in advance

Answer 1

I appointed three points, all three in the middle of the screen ( x: 0.5 ). The reason for three points is that the rest of the page continues to paint the nearest point's color and it will be gradient if you assign two. I put the first two points near each other so that the gradient effect wont show:

linearGradient: { x1: 0.5, y1: 0.5, x2: 0.5, y2: 0.51, x3: 0.5, y3: 1 },
stops: [[0, 'rgb(255, 255, 255)'],
        [1, 'rgb(200, 200, 255)'],
        [2, 'rgb(200, 200, 255)']]

Here's the fiddle: http://jsfiddle.net/4rTBY/625/