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.
The tooltip appears when hovering over a point in a series. By default the tooltip shows the values of the point and the name of the series. For the full set of options available for the tooltip, see the API reference.
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.
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
},
});
});
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
},
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;
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With