Highcharts highstock tooltip series order - javascript

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

Set tooltip dynamically in HIGHCHARTS

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

Highcharts - Tooltip not displaying all series values on hover

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.

Getting a value in Highcharts.js

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
},

Add tooltip to highcharts javascript

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.

How to get multiple series data in tooltip highcharts?

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

Categories