highchartsangular-highcharts

nGradient effect with negative values on highcharts

I have the following gradient effect line chart.

https://jsfiddle.net/e7Ly41wm/2/

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.

Highcharts

I can change chart type to area chart if required.

What changes do I need to achieve this?

Solution

  • 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