Two different thresholds in HighCharts 3.0

Question

With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :

http://jsfiddle.net/highcharts/YWVHx/

Following code :

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {

        $('#container').highcharts({

            chart: {
                type: 'arearange'
            },

            title: {
                text: 'Temperature variation by day'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: null
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: '°C'
            },

            legend: {
                enabled: false
            },

            series: [{
                name: 'Temperatures',
                data: data,
                color: '#FF0000',
                negativeColor: '#0088FF'
            }]

        });
    });

});

Is it possible to have another threshold with a third color, like this for example :

Thanks in advance for your help.

Answer 1

It actually is possible if you don't mind plotting the data twice.

    $('#container').highcharts({

        chart: {
            type: 'arearange'
        },

        title: {
            text: 'Temperature variation by day'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            threshold : 0,
            data: data,
            color: 'orange',
            negativeColor: 'blue'
        },
        {
            name: 'Temperatures',
            threshold : 10,
            data: data,
            color: 'red',
            negativeColor: 'transparent'
        }]
    });
});

http://jsfiddle.net/YWVHx/97/