Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts Area graph, use 2 fill colors above / below X axis

In Highcharts, I'd like to fill an Area graph with 2 colors, positive values get one color, negative values get another color. I've been able to do this with a linearGradient, but this must be adjusted based upon the size of the container.

Is there a more general way of doing this, e.g. setting values > 0 color 1, values < 0 color 2?

See my JSFiddle for more information and an example: http://jsfiddle.net/GNvur/2/

like image 304
Kris Chant Avatar asked Sep 12 '12 00:09

Kris Chant


1 Answers

The parameter we were looking for is named negativeColor. Use it in an area serie like this :

   series: [{
        type:'area',
        data:chartValues,
        color: "#FF0000",
        threshold: 0,
        negativeColor: '#00FFFF',

        marker : {
            enabled: true
        }
    }]

see the result in this JSFiddle.

like image 164
Guian Avatar answered Nov 02 '22 18:11

Guian