Highcharts: How to access range values in formatter for “columnrange” type?

2
votes

I want to customize the tooltips of my Highcharts graph. The y-axis is of type "columnrange", i.e. it has an interval for the y-value:

    series: [{
        data: [
            [-0.547571175, 0.401498266],
            [-0.960011899, 0.444655955],
            [-0.660727717, 0.862639688],
            [-0.446911722, 0.660380453],
            [-0.863925256, 0.619544707],
               .......
        ]
    }]

The tooltip formatter should look something like this:

    tooltip: {
        formatter: function() {
            var point = this.points[0];
            return '<b>'+ point.x +'</b><br />Interval:'+ point.low +' - '+ point.high;
        },
        shared: true
    }

But point.low and point.high are not defined... How to get these low/high values?

Here you find a sample graph: http://jsfiddle.net/dmN3N/21/

5
highcharts
As I see tooltip displays your low / high value, so I'm not sure what is wrong? – Sebastian Bochan
What you see is the default tooltip. If I want to customize this, I need to define a formatter of my own. And for this reason I need access to the low/high values. Have a look at my own answer : point.series.data[0].low... – rantanplan

5 Answers

9
votes

In case when you use shared option in tooltip then you need to use this.points[0] etc, if you have shared option disabled you should use this.point

Take look at example shared http://jsfiddle.net/dmN3N/24/

 tooltip: {
        shared:true,
        valueSuffix: '',
        formatter:function(){

            return 'LOW: '+this.points[0].point.low+' HIGH: '+this.points[0].point.high ;
        }
    },

and not shared

http://jsfiddle.net/dmN3N/22/

tooltip: {
        valueSuffix: '',
        formatter:function(){

            return 'LOW: '+this.point.low+' HIGH: '+this.point.high;
        }
    },
1
votes

This code works fine for the formatter of tooltips:

tooltip: {
    formatter: function() {
        var point = this.points[0];
        return '<b>'+ point.x +'</b><br />Interval:'+ point.series.data[0].low +' - '+ point.series.data[0].high;
    },
    shared: true
}

See here for a sample: http://jsfiddle.net/c2gVe/1/

0
votes

Aren't they just point[0] and point[1] for low and high respectively?

0
votes

Try this, for your formatter function:

formatter: function() {
    var lowPoint = getLow(this.series.data, 'x');
    var highPoint = getHigh(this.series.data, 'x');
    return '<b>'+ this.x +'</b><br />Interval:'+ lowPoint +' - '+ highPoint;
}

The getLow() and getHigh() functions simply take the list of points and returns the low/high points respectively.

Here is one way of implementing it, but you're free to use whatever algorithm you like.

I'm assuming you wanted the highest/lowest x value (you can easily get y by passing in 'y' as axis argument):

var getLow = function(list, axis) {
    var low = null;
    for (var i = 0; i < list.length; i++){
        if (low !== null) {
            low = list[i][axis] < low ? list[i][axis] : low;
        } else {
            low = list[i][axis];
        }
    }
    return low;
};

var getHigh = function(list, axis) {
    var high = null;
    for (var i = 0; i < list.length; i++){
        if (high !== null) {
            high = list[i][axis] > high ? list[i][axis] : high;
        } else {
            high = list[i][axis];
        }
    }
    return high;
};

Here is the fiddle to demonstrate: http://jsfiddle.net/tKB7y/

0
votes

To use the basic pointFormat property you can do:

tooltip: { pointFormat: '{point.low}' }