javascript - highcharts - changing color of area depending on y-value - Stack Overflow

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

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

• javascript
• highcharts

Share Improve this question Follow asked Jul 7, 2014 at 20:00 AdityaKapreShrewsburyBostonAdityaKapreShrewsburyBoston 1,14322 gold badges1818 silver badges3838 bronze badges 1

• Please explain clearly what you want, and create a reference fiddle ! – Rahul Gupta Commented Jul 8, 2014 at 5:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

1. 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.

2. 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.