When the highcharts tooltip is shared (all series shown in the tooltip), is there a way to set the order in which the series display in the tooltip?
Yes. Each point is an object in a array called points. If you want it in reverse order you can do that via:
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points.reverse(), function () {
s += '<br/>' + this.series.name + ': ' +
this.y + 'm';
});
return s;
},
shared: true
},
If you want to do some other ordering then you need to provide more information.
Related
Am using Highcharts in my application. Here, am facing one problem like,
My x-axis list is,
var peMList = ["EM", "UF", "WT"];
My Object like,
var mapObj = {};
mapObj["EM"]="Element_Missing";
mapObj["UF"]="Unknown_Format";
mapObj["WT"]="Wrong_Type";
My chart Format like,
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>'+mapObj['{point.key}'],
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}% </b><br/>',
shared: true
}
How can I add my object value in my chart tooltip. I already added But, its showing undefined.
Any help will be greatly appreciated.
You have to use formatter function:
tooltip: {
formatter: function() {
return '<span style="font-size:10px">' + this.points[0].key + '</span><table>' + mapObj[this.points[0].key] + '</table><br/>' + '<span style="color:' + this.points[0].series.color + '">' + this.points[0].series.name + '</span>: <b>' + this.points[0].y + '% </b>'
},
shared: true
}
Live demo: http://jsfiddle.net/BlackLabel/jvg0fk7y/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
The intended behaviour here is to have the tooltip display all 7 the bar values for a specific yAxis entry.
Instead it's displaying the values dynamically for 3 to 7 of the bar values depending on where the cursor is located in the yAxis entry.
The tooltip definition:
tooltip: {
shared: true,
formatter: function () {
var s = '<b>' + this.x + '</b><br/>';
$.each(this.points, function () {
s += '<span style="color:' + this.series.color + '">' + this.series.name + ': <b>' + section.convertVal(this.y) + '</b><br/>';
});
return s;
},
hideDelay: 50
}
Display function that converts numeric values to sings:
section.convertVal = function (_intVal) {
switch (_intVal) {
case 1:
return "N";
case 2:
return "S";
case 3:
return "T";
case 4:
return "E";
default:
return "S.O.";
}
}
Highchart definition here
Sample data here
Upgrading to the latest version of Highcharts (v6.0.3) solved the issue.
It appears this was a bug in v5.0.12.
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/
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
},
I'm running into some problems with adding some information to tooltip.
Basically, my highcharts gets generated dynamically, and everything is working great, but I would like an additional field to show up in tooltip, and I cannot make it work.
Any help would be appreciated.
Here is the snippet of code I am using which is generating an "undefined" label:
tooltip: {
formatter: function () {
var s;
if (this.point.name) {
s = '' + this.point.name + ': ' + this.y + ' fruits';
} else {
s = '' + this.series.title + ': ' + this.y + ' ' + this.x;
}
return s;
}
},
And here is the jsfiddle: http://jsfiddle.net/9zN2M/2/
It looks like this.series does not have a title property.
It does have a name property, though, so you should be able to use this.series.name.
I want to display multiple series Data in tooltip on every column
tooltip: {
formatter: function() {
return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
'<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
}
},
and Data
series: [{
showInLegend: false,
name: 'Total Click',
data: [3000,200,50,4000],
color: '#9D9D9D'
}, {
showInLegend: false,
name: 'Total View',
data: [100,2000,3000,4000],
color: '#D8D8D8'
}]
I am using like this but in tool tip only one series data is showing at a time.
I want to display Data like this (Total View:100 and Total Click:3000 )
please try using this code
updated DEMO
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
point.y +'<span>');
});
return s.join(' and ');
},
shared: true
},
You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.shared and then in formater iterate on each point.
If anybody looking for scatterplot, here is solution to show shared tooltip.
formatter: function(args) {
var this_point_index = this.series.data.indexOf( this.point );
var this_series_index = this.series.index;
var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
var that_series = args.chart.series[that_series_index];
var that_point = that_series.data[this_point_index];
return 'Client: ' + this.point.name +
'<br/>Client Health: ' + this.x +
'<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
'<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}
Jsfiddle link to Solution