CODEWITHSUNDEEP
javascripthighcharts
CatShoes
CatShoes

Reputation: 3733

Highcharts two colors for fill of area chart

I want something like a how you can have a color for a negative threshold.

What I want

enter image description here

I've tried various things in: http://jsfiddle.net/snlckers/rtGEX/1/.

plotOptions: {
            area: {
                fillColor: 'green',
                negativeFillColor: 'yellow',
                lineColor: 'red',
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        legend: { enabled: false, },
        series: [{
            data: [50, 60, 55, 120, 83, 45, 55, 50, 130, 110, 115, 40],

            threshold: 75,
        }]

What I got

enter image description here

I can't seem to find a property that'll give me what I want, but this seems like such a simple concept that I feel like there must be something I am missing. Any ideas?

Upvotes: 0

Views: 2134

Answers (1)

jlbriggs
jlbriggs

Reputation: 17800

AFAIK there is not an option to do this, actually.

I think there are two approaches. One is to use multiple series. This can get complicated in that you have to figure out where to put the x values for the points that cross the y axis threshold in between x axis points.

example:

The other is to try to leverage the gradient fill to accomplish this as well, but I do not have an example for this, and determining your stop values for the gradient may be complicated as well.

Upvotes: 2

Related Questions