We Keep Coding

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 Showing 700 as 7 Hundred on Tooltip while showing 7 on graph

I have a highcharts graph that only goes up to 99 if a number is above 99 it will be made smaller such as 700 will be converted to show as 7 on the graph but when I try to but on the tooltip for it to show as 7 Hundred it does not work. I have it currently working for 7245 but if I have 7000 it wont work either. How can I resolve this?
Here is my code
http://jsfiddle.net/qvtnqs8r/2/
Here is the tooltip code that is the part that is failing me
tooltip: {
shared: true,
formatter: function() {
var points = this.points,
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + points[0].key + '</span><br/>',
H = Highcharts,
value,
numericSymbolDetector;
each(points, function(point, i) {
value = point.y;
numericSymbolDetector = Math.abs(point.y);
if (((value)*1000)%10!=0) {
value = H.numberFormat(value, 2, '.', '') + 'k';
}
txt += '<span style="color:' + point.series.color + '">' + point.series.name + ': <b>' + value + '</b><br/>';
});
return txt;
}
//pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
}

Highcharts Bar Graph's Tool Tip Point Format

I have created a bar graph using HighCharts.js. Below is my declaration:
var myChart = Highcharts.chart(id, {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: x,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Amount (Php)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat:'<tr>' +
'<td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td>' +
'</tr>',
footerFormat:'</table>',
shared: true,
useHTML: true
},
plotOptions:{
column:{
pointPadding: 0.2,
borderWidth: 0
}
},
series: data
});
See image below:
I want the Point value's format in the Tooltip to be like this:
Apr
Collections: 7,903,113.53
Disbursements: 218,257,774.81
I tried changing pointFormat attribute in my declaration to the code below:
pointFormat:'<tr>' +
'<td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y.formatMoney(2, ".", ",")}</b></td>' +
'</tr>',
In my java script I created a function below:
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
But throws an error:
highcharts.js?Z:20 Uncaught TypeError: Cannot read property '", ",")' of undefined
Is there an easy/other way to implement what I want? Here is my jsfiddle.

Instead of using pointFormat, use pointFormatter callback
pointFormatter: function() {
return '<tr>' +
'<td style="color:' + this.series.color + ';padding:0">' +
this.series.name + ': </td>' +
'<td style="padding:0"><b>' + this.y.formatMoney(2, '.', ',') +
'</b></td>' +
'</tr>';
},
Example: https://jsfiddle.net/w64runoo/11/
Also, polluting Number.prototype is a not a clean way to do this. You can check Highcharts' numberFormat callback and extend it with your function.
http://api.highcharts.com/highcharts/Highcharts.numberFormat
Check also global lang options where you can define thousandStep and decimalPoint http://api.highcharts.com/highcharts/lang.thousandsSep

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

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