nGradient effect with negative values on highcharts

Question

I have the following gradient effect line chart.

plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            }

For positive values, I want to stop the gradient effect at 0.

For negative values, I want to have the gradient effect towards the 0 (reverse) and stop at 0.

It will be similar like but with gradient effect.

I can change chart type to area chart if required.

What changes do I need to achieve this?

Sebastian Wędzel · Accepted Answer · 2021-03-16T09:35:46.313

1

Is that an output that you want to achieve?

All I changed is the series type to the areaspline.

Demo: https://jsfiddle.net/BlackLabel/7t6x4uzg/

EDIT

You can use the zones to define a fillColor for particular ranges.

Demo: https://jsfiddle.net/BlackLabel/kx209nzh/

API: https://api.highcharts.com/highcharts/series.line.zones.fillColor

edited Mar 16 '21 at 09:35

answered Mar 15 '21 at 18:31

Sebastian Wędzel

11,417
1
6
16

Thanks Sebastian. I would like to add gradient effect in it. Blue - nearer the line. While - nearer the 0 line. – developer Mar 15 '21 at 19:32
That's great, is it possible to have the gradient effect to show white nearer the 0. Mainly for negative number, I am trying it to start with blue and ends with 0 in the reverse direction. Thanks. – developer Mar 16 '21 at 09:49
@developer - something like here: https://jsfiddle.net/BlackLabel/9ohu8wsc/? – Sebastian Wędzel Mar 16 '21 at 11:05
Exactly what I was looking for. Thank you so much. – developer Mar 16 '21 at 11:20

nGradient effect with negative values on highcharts

1 Answers1