Highcharts - areaspline with negative values, area should be always at the bottom

Question

I would like to create a chart with Highcharts, with negative values, like this:

http://jsfiddle.net/vargapeti/LjL03o8h/3/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Area chart with negative values'
        },
        yAxis: {
            title: {
                text: 'value'
            }
        },
        plotOptions: {
            area: {
                dataLabels: {
                    enabled: true
                },
                stacked: 'normal'
            }
        },
        series: [{
            name: 'Area with negative values',
            data: [[0, -7.0], [1, 6.9], [1.5, 9.5], [3, -6]],
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                  [ 0, Highcharts.Color('#FFA500').setOpacity(1).get('rgba') ],
                  [ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
              ]
        }
        },
        {
            name: 'Area with positive values',
            data: [[0, 13.0], [1, 26.9], [1.5, 29.5], [3, 14]],
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                  [ 0, Highcharts.Color('#d2d8df').setOpacity(1).get('rgba') ],
                  [ 1, Highcharts.Color('#ffffff').setOpacity(0.3).get('rgba') ]
              ]
        }
        }        

                ],

    });
});

I need however, the orange area to be always between the X-axis and the curve, regardless of the negative values. So basically I want to shift the curve "Area with positive values" under zero, but keep the filled up area under the curve.

Is it possible with Highcharts anyhow?

Thank you.

Could you show kind of screenshot/mockup what is the expected result? I'm not sure if I understand you correctly. — Paweł Fus, Sep 19 '14 at 13:16
I am not yet allowed to post pictures to stackowerflow. Please check following links. I would like to get this: https://www.copy.com/s/wmEkaVeFdi2D/Area1.JPG instead of this: https://www.copy.com/s/X4jFJGEPL6Nd/Area2.JPG. As you can see, in the required diagram, the colored area is under the curve, regardless, where the 0 value on Y axis is. — vargapeti, Sep 22 '14 at 06:41
The links above are not working with IE for some reason. Please try to open them with FF or Chrome — vargapeti, Sep 22 '14 at 06:48
Try my answer - and just for future, better description means faster and more accurate answers ;) — Paweł Fus, Sep 22 '14 at 09:41

Swetha · Answer 1 · 2014-09-19T12:01:20.810

2

I don't fully understand your question.

To plot the values above zero, you can do something like this ,

        yAxis: {               
            min:0
        },

Check this fiddle:http://jsfiddle.net/LjL03o8h/5/

edited Sep 19 '14 at 12:01

answered Sep 18 '14 at 13:25

Swetha

746
10
19

Thanks for your answer. What I need is, that (in my example) the orange area would be under, and only under the blue line. So the area between the blue line and X Axis would be completely orange, and there would be no orange area above the blue line, even if it is under zero. – vargapeti Sep 19 '14 at 06:52

score 1 · Answer 2 · answered Sep 22 '14 at 09:40

1

Simply set threshold: null for areaspline series. For example: http://jsfiddle.net/LjL03o8h/6/

plotOptions: {
    area: {
        threshold: null
    }
}

answered Sep 22 '14 at 09:40

Paweł Fus

44,795
3
61
77

This answer helps me in a case of negative min y values in a polar area chart. Without setting threshold, there would be a blank shape at the center of the area. – Michael Shang May 25 '16 at 14:36

score 0 · Answer 3 · answered Jun 22 '18 at 17:29

0

Just check this answer, it might help you. Also because you have negative an positives both in same series, you might want to check this and this.

answered Jun 22 '18 at 17:29

IsmailS

10,797
21
82
134

Highcharts - areaspline with negative values, area should be always at the bottom

3 Answers3

Linked