I displayed a graphic with Hightcart. I work with R.
I added tooltips which we can see all the y values for the same point x:
graph$tooltip(
formatter = "#!function () {
var s = '<b>' + Highcharts.dateFormat('%B %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ': ' +
'<b>' + Highcharts.numberFormat(this.y * 100, 2) + '%</b>';
});
return s;
}!#", shared = TRUE
, crosshairs = TRUE
, hideDelay = 3000
)
So for one tooltip, I have around 10 values in this form:
ITEM1 : XX%
ITEM2 : YY%
...
ITEM10 : ZZ%*
Thus it's difficult to identify which value belong which curve. For this reason, I would like to add in the tooltips, the legend before the values:
[yellow circle] ITEM1 : XX%
[blue circle] ITEM2 : YY%
...
[green circle] ITEM10 : ZZ%*
If someone have this problem, you must add :
this.series.color + '\">\u25CF</span> '+ this.series.name
Related
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/>',
}
I add custom colors stops with gradients but tooltips point colors are objetcs, no rgb, and no show base color in pointFormat. The legend show base colors, no have problem with labels.
pointFormat : '<span style="color:{point.color}">\u25CF</span>'+
' {series.name} {series.color} - {point.color}: <b>{point.y}</b><br/>' }
Customs Colors Chart
Default Colors Chart
Here my sample http://jsfiddle.net/castocolina/2mdt9rhb/
Try to comment and uncomment the custom colors block
How fix this problem?
This happens for 2 reasons:
The new custom color is not a solid color, but rather a gradient, therefore when you try to extract the "series.color" a gradient is obtained, the style="color" value requires a solid color to be shown.
According to the documentation on point formatting (http://api.highcharts.com/highcharts#tooltip.pointFormat) the coloring seems be done on the "pointFormat" field but I'm not sure why it does not works there... Hopefully it works on the "formatter" field. Maybe a bug on HighCharts?
Here is the new "formatter" field:
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/><span style="color:'+ point.series.color.stops[1][1] +'">\u25CF</span>: ' + point.series.name + ': ' + point.y;
});
return s;
}
Here is a the working demo with the colors: https://jsfiddle.net/adelriosantiago/pL0yzfsx/3/
Note that the point can't be formatted with a gradient therefore I have chosen the highlighted part of the color which corresponds to "point.series.color.stops[1][1]"
Thanks a lot #adelriosantiago, I added a condition to check points or point property depends of series or pie. The latest version of highcharts (4.1.5) have problem to display tooltip of embedded pie, I had to use a previous version (4.0.4)
formatter : function() {
var s = '<b>' + this.x + '</b>';
var color = null;
if (typeof this.points != 'undefined') {
$.each(this.points, function(i, point) {
color = point.series.color.stops[1][1];
if (i == 3) {
s += '<br/><span style="color:' + color + '">\u00A2</span> ';
s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 2);
} else {
s += '<br/><span style="color:' + color + '">\u25CF</span> ';
s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 0);
}
});
} else {
color = this.point.color.stops[1][1];
s = '<h3 style="color:' + color + '; font-weight: bold;">' + this.point.name + '</h3>';
s += '<br/><span style="color:' + color + '">\u25CF</span> ';
s += Highcharts.numberFormat(this.point.y, 2) + ' (' + Highcharts.numberFormat(this.point.percentage, 2) + '%)';
}
return s;
}
Here the full fix http://jsfiddle.net/castocolina/2mdt9rhb/4/
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.
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