Getting a value in Highcharts.js

Question

My lack of Javascript skills are really showing here, but I am having a problem.

I have built a chart using Highcharts.js and I am trying to customize the tooltip display. It is a range chart and by default point.y returns the low value. I have no idea how to return the high value.

Can anyone help? Here is the formatter code and I have also created a jsfiddle.

       formatter: function() {
            var s = '<b>'+ this.x +'</b>';

            $.each(this.points, function(i, point) {

                s += '<br/>Maximum Value: ?<br/>Minimum Value: ' + point.y 
                + '<br/>Spread Value: Max-Min';
            });

            return s;
        },

http://jsfiddle.net/cCrLh/1/

Answer 1

Each of objects from points array contain point property which is true object from Highcharts. Then you have access to point.high and point.low . See: http://jsfiddle.net/cCrLh/3/

    tooltip: {
        crosshairs: true,
        shared: true,
        formatter: function() {
            var s = '<b>'+ this.x +'</b>';
            $.each(this.points, function(i, point) {
                s += '<br/>Maximum Value: ' + point.point.high + '<br/>Minimum Value: ' + point.point.low
                + '<br/>Spread Value: Max-Min';
            });

            return s;
        },
        shared: true
    },