Highcharts - areaspline with negative values, area

2019-07-07 00:25发布

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.

3条回答
干净又极端
2楼-- · 2019-07-07 00:40

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

plotOptions: {
    area: {
        threshold: null
    }
}
查看更多
三岁会撩人
3楼-- · 2019-07-07 00:48

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.

查看更多
Root(大扎)
4楼-- · 2019-07-07 01:07

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/

查看更多
登录 后发表回答