Baobab Baobab - 1 month ago 22
jQuery Question

Highcharts Columnrange data labels high and low different colors

In a basic Highcharts columnrange chart, how do I assign a color (blue) to the low values and a different color (red) to the high values?

The chart I am referring to is this one: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/

So for January the '-9.7' should be blue and the '9.4' should be red.

In a different example, I have tried this:

series: [{
name: 'Temperatures',
data: [
{low: 2, high: 6, color: 'green'},
{low: 1, high: 9, color: 'yellow'},
{low: -3, dataLabels: {color: 'red'}, high: 5, color: 'blue'},
{low: 0, high: 7, color: 'orange'}
],
color: '#b9deea',
borderColor: '#92cbde',
borderRadius: 4
}]


But that changes the data label colour for both the low AND high value for the blue column to red.

Thanks in advance.

Baobab

Answer

Updated answer

In the formatter callback you can wrap text inside span and style it properly.

formatter: function () {
                    var color = this.y === this.point.high ? 'red' : 'blue';

                    return '<span style="color:' + color + '">' + this.y + '°C</span>';
                }

example: http://jsfiddle.net/6ofbr32b/1/

Coloring the points fragments

You have to split a point into two points - which will represent its negative and positive values, set threshold to 0 and negativeColor. Then adjust tooltip and data labels.

Splitting can be achieved in that way;

//plotOptions.columnRange
negativeColor: 'red',
threshold: 0,
borderWidth: 0,

//series
keys: ['x', 'low', 'high', 'part'],
  data: [
    [0,-9.7, 0, 'neg'],
    [0,0,9.4, 'pos'],
    [1,-8.7, 0, 'neg'],
    [1, 0, 6.5, 'pos'],
    [2,-3.5, 0, 'neg'],
    [2, 0, 9.4, 'pos'],
    [3,0.0, 22.6],
    [4,2.9, 29.5],
  ]

'part' is a helper which will be useful for adjusting tooltip and data labels.

Data labels so only one edge will be displayed if the points is split

dataLabels: {
      enabled: true,
      formatter: function() {
        if (this.point.part === 'neg' && this.y === this.point.low) {
            return this.y + '°C';
        } else if (this.point.part === 'pos' && this.point.high === this.y) {
            return this.y + '°C';
        } else if (!this.point.part) {
            return this.y + '°C';
        }
        return '';
      }
    }

and tooltip

tooltip: {
  pointFormatter: function () {
    var points = this.series.points,
            low = this.low,
        high = this.high;
    if (this.part === 'neg') {
        low = this.low;
      high = points[this.index + 1].high;
    } else if (this.part === 'pos') {
        low = points[this.index - 1].low;
      high = this.high;
    }
    return '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + '°C</b> - <b>' + high + '°C</b><br/>';
  }
},

example: http://jsfiddle.net/xdg67kuo/3/

It is also possible to achieve the desired effect with a stacked column chart: example