highcharts - changing color of area depending on y-value

highcharts, javascript

Solution

There are two options, your desrciption lacks of information, so I show you both of them: http://jsfiddle.net/4vzEt/13/

Threshold with negative color:

$("#container1").highcharts({
  series: [{
    threshold: 2,
    negativeColor: 'red',
    color: 'green',
    type: 'area',
    data: [1, 2, 2, 1, 3, 3, 2, 3, 2, 1, 1, 3, 1, 1]
  }]
});

Note: Threshold sets starting y-value of series in that value.

Gradient color:

$("#container2").highcharts({
    series: [{
        threshold: 1,
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, 'green'],
                [0.49, 'green'],
                [0.5, 'red'],
                [1, 'red']
            ]
        },
        type: 'area',
        data: [1, 2, 2, 1, 3, 3, 2, 3, 2, 1, 1, 3, 1, 1]
    }]
});

Note: Markers inherit series color. Disable them, or set for each point color directly.

Problem

How can I change the color of an area type plot depending on y-values which are in same series ? type of chart - area y- values possible - 1, 2 and 3 desired output - Green color area for values between 3 & 2, red color area for values between 2 & 1

Original source