6

I have 4 results inside my highcharts tooltip and they are not sorted they looks like this:

somerhing: 10 $
something: 18 $
something: 2 $
something: 8 $

I want to sort them from lowest $ to highest $ from 2$ to 18$ like this:

somerhing: 2 $
something: 8 $
something: 10 $
something: 18 $

Here is the highcharts loop for tooltip results:

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

           $.each(this.points, function(i, point) {
           s += '<br/>'+ point.series.name +': '+ point.y +currency;
           });

           return s;
           },

Any ideas how to sort it ?

Thanks.

2 Answers 2

17

Adding on to the above answer.

I wanted to have the default formatting of the tooltip as well. So I called tooltip.defaultFormatter.call(this, tooltip) inside the formatter callback.

Note that it is sorted in descending order. Just remove the items.reverse() if you want ascending order.

HighCharts v4.0.4

JSFiddle

function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}

function splat(obj) {
    return isArray(obj) ? obj : [obj];
}

$(function () {
    $('#container').highcharts({
        tooltip: {
            formatter: function (tooltip) {
                var items = this.points || splat(this),
                    series = items[0].series,
                    s;

                // sort the values
                items.sort(function(a, b){
                    return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
                });
                items.reverse();

                return tooltip.defaultFormatter.call(this, tooltip);
            },
            shared: true
        },
    });
});

HighCharts v3.0.2

Based on the defaultFormatter function with the above applied to it.

tooltip: {
    formatter: function (tooltip) {
        var items = this.points || splat(this),
            series = items[0].series,
            s;

        // build the header
        s = [series.tooltipHeaderFormatter(items[0])];

        // sort the values
        items.sort(function(a, b){
            return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
        });
        items.reverse();

        // build the values
        $.each(items, function (i, item) {
            series = item.series;
            s.push((series.tooltipFormatter && series.tooltipFormatter(item)) ||
                item.point.tooltipFormatter(series.tooltipOptions.pointFormat));
        });

        // footer
        s.push(tooltip.options.footerFormat || '');

        return s.join('');
    },
    shared: true
},
5

Try this

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

           var sortedPoints = this.points.sort(function(a, b){
                 return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
             });
           $.each(sortedPoints , function(i, point) {
           s += '<br/>'+ point.series.name +': '+ point.y +currency;
           });

           return s;
           },
1
  • 1
    I used this in exactly the opposite way. So the biggest values is shown on top. This way the tooltip matches the order of the lines shown in the graph, which makes more sense to me. Jun 27, 2012 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.