CODEWITHSUNDEEP
highcharts
Fizzix
Fizzix

Reputation: 24375

How to have a negative colour on an area chart as a gradient?

Using highcharts, how can I have a negative colour as a gradient instead of a solid fill?

I tried with the following:

series: [{
    name: 'John',
    data: [5, -3, -4, 7, 2],
    negativeColor: {
        linearGradient: [0, 0, 0, 300],
        stops: [
            [0, 'rgb(255,47,47)'],
            [1, 'rgb(171,0,0)']
        ]
    },
    fillColor: {
        linearGradient: [0, 0, 0, 300],
        stops: [
            [0, 'rgb(0,141,3)'],
            [1, 'rgb(0,255,6)']
        ]
    }
}]

Although, the above code only applies a gradient to the positive values, and a solid fill to the negative values.

How can I achieve this?

WORKING DEMO

Upvotes: 0

Views: 1011

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Try to use hex colours and set correct stop points.

negativeColor: {
            linearGradient: [0, 100, 0, 300],
            stops: [
                [0, '#000000'],
                [1, '#ff0000']
            ]
        },

http://jsfiddle.net/zr4Ze/1/

Upvotes: 1

Related Questions