How to change area graph color above certain value in Highcharts

Question

In highchart area chart, how could I set the area color above certain value to different color?

My target graph is like this:

However, what I see right now is like this:

http://jsfiddle.net/brianpchsu/0kwgocp4/

    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
       xAxis: {
          min: 0,
          max: 100,
          pointRange:10,
          title: {
            text: 'Time'
          }
        },
        yAxis: {
          title: {
            text: 'Power'
          }
        },
        plotOptions: {
            area: {
              stacking: 'normal',
              lineWidth: 0,
              marker: {
                enabled: true,
                symbol: 'circle',
                radius: 0
              }
            }
        },
        series: [{
          data: [
            [0, 2500],
            [10, 2600],
            [20, 2700],
            [30, 2800],
            [40, 2900],
            [50, 3000],
            [60, 3100],
            [70, 3200],
            [80, 3300],
            [90, 3400],
            [100, 3500],

          ],
          color: '#FF0000', 
          negativeColor: '#1B8753',
          threshold: 3000
        }]
    });
});

Answer 1

You could use .zones" rel="nofollow">zones.

Example: http://jsfiddle.net/0kwgocp4/1/

      zones: [{
        color: '#1B8753',
        value: 3000
      },{
        color: '#FF0000'
      }]