Highcharts column range change color for negative numbers

Question

I am having issue with HighCharts, more specifically with Column range graph. I would like to have red color for negative numbers and blue color for positive numbers.

The current code give the red color to the bars with Only positive values, and blue color to those where the interval contains a negative value:

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: false

        },

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

        subtitle: {
            text: 'Observed in Vik i Sogn, Norway'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: {
            title: {
                text: 'Temperature ( °C )'
            }
        },

        tooltip: {
            valueSuffix: '°C'
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    grouping:true,
                    formatter: function () {
                    if(this.y == 0)
                        return "";
                    else
                        return this.y;
                    }
                }
            }

        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            color: '#FF0000',
            displayNegative: true,
            negativeColor: '#0088FF'  ,
            data: [
                [0, 9.4],
                [-8.7, 6.5],
                [-3.5, 9.4],
                [-1.4, 19.9],
                [0.0, 22.6],
                [2.9, 29.5],
                [9.2, 30.7],
                [7.3, 26.5],
                [4.4, 18.0],
                [-3.1, 11.4],
                [-5.2, 10.4],
                [-13.5, 9.8]
            ]
        }]

    });

});

The Current graph looks like:

The result needed should be like:

Link to fiddle

Answer 1

After some researchs and based on the comment above from @Sebastian here is the conclusion:

You can modify your Data by adding the index to match the xAxis like Data[[Index,from,to],[SecondIndex,from,to] etc... and when it comes to the negative values you can set Data Data[[IndexForNegative,from,to],[IndexForNegative,from,to]... for the same value.

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange'
    },

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

    subtitle: {
      text: 'Observed in Vik i Sogn, Norway'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
      title: {
        text: 'Temperature ( °C )'
      }
    },

    tooltip: {
      valueSuffix: '°C'
    },

    plotOptions: {
      columnrange: {
        negativeColor: 'red',
        threshold: 0,
        dataLabels: {
          enabled: true,
          formatter: function() {               
          }
        }
      }
    },

    legend: {
      enabled: false
    },

    series: [{
      name: 'Temperatures',
      data: [
                [0,0,9.4],
                [1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index
                [2,-3.5,0],[1,0,9.4],
                [3,-1.4,0],[2,0,19.9],
                [4,0.0],[4,0,22.6],
                [5,2.9, 29.5],
                [6,9.2, 30.7],
                [7,7.3, 26.5],
                [8,4.4, 18.0],
                [9,-3.1,0],[9,0,11.4],
                [10,-5.2,0],[10,0,10.4],
                [11,-13.5,0],[11,0,9.8]
            ]
    }]    
  });    
});

http://jsfiddle.net/0ns43y47/