score:3

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/


Related Query

More Query from same tag