javascript - Highcharts column range change color for negative numbers -


i having issue highcharts, more column range graph. have red color negative numbers , blue color positive numbers.

the current code give red color bars only positive values, , blue color interval contains negative value:

$(function () {      $('#container').highcharts({          chart: {             type: 'columnrange',             inverted: false          },          title: {             text: 'temperature variation month'         },          subtitle: {             text: 'observed in vik 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: enter image description here

the result needed should like:

enter image description here

link fiddle

after researchs , based on comment above @sebastian here conclusion:

you can modify data adding index match xaxis data[[index,from,to],[secondindex,from,to] etc... , when comes negative values can set data data[[indexfornegative,from,to],[indexfornegative,from,to]... same value.

$(function() {    $('#container').highcharts({      chart: {       type: 'columnrange'     },      title: {       text: 'temperature variation month'     },      subtitle: {       text: 'observed in vik 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 data has negative values using 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/


Comments