This question already has an answer here:
How to get next point in Highcharts tooltip
(1 answer)
Closed 7 years ago.
I have a line chart with cumulative values. What I try to do in tooltip: show value of ( current point.y - previous point.y ). But I don't
know how to get the y value of the previous point in a tooltip formatter function.
You need to use loop over each point in current serie and compare current point with loop point. If are the same, then extract point with index-1 from array of points.
tooltip: {
formatter: function () {
var x = this.point.x,
y = this.y,
series = this.series,
each = Highcharts.each,
txt = 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
each(series.data, function(p, i){
if(p.x === x && series.data[i-1]) {
txt += ' Previous: ' + series.data[i-1].y;
}
});
return txt;
}
},
Example: http://jsfiddle.net/3qw6ry06/
Related
Highcharts: I have a shared tooltip with 3 default bullets. I need to add custom information to the 3rd bullet (or series).
I need Bullet C to show its default value, but also show what percentage it is of Bullet B. In the screenshot below, Bullet C would say: "Good Condition: 3,448 (32% of Assessed).
My question is 2 parts:
How do I customize only the third bullet tooltip?
How do I find out what percentage of Bullet B is represented by Bullet C? (in my example, 3,448 is 32% of 10,697, but how do i find that using highcharts?)
Update: This code formats the bullet and partially answers my first question (except it's missing the comma for thousands format):
return '<span style="color:' + this.series.color + '">● </span>' + this.series.name + ':<b>' + this.y + '</b><br/>';
You can define individual tooltip options for a series, in your case you need to use pointFormatter function, for example:
series: [..., {
...,
tooltip: {
pointFormatter: function() {
var series = this.series.chart.series,
percentage = Highcharts.numberFormat(
this.y / series[1].points[this.index].y * 100,
2
);
return '<span style="color:' +
this.color + '">●</span> ' +
this.series.name + ': <b>' +
Highcharts.numberFormat(this.y, 0) +
'</b> Percentage: ' + percentage + '%<br/>'
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4955/
API Reference:
https://api.highcharts.com/highcharts/series.column.tooltip
https://api.highcharts.com/class-reference/Highcharts#.numberFormat
I am trying to get the following output in highcharts...
Have a list of supporting values for a specific point and show in the tooltip all of those supporting values on that single point.
my solution is to use the formatter()
formatter: function () {
var res = 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b><br/>';
for(var i = 0; i < this.point.supportingData.list.length; i++){
res += this.point.supportingData.list[i].name + '<br/>';
}
return res;
}
example.... point (x,y) has 12, 17, 53 and 27
I want all of those valuse to appear on the hover over on point (x,y).
The problem is that I want my formatter to be split like this.
http://jsfiddle.net/207xt4an/
Where the x value is on the bottom of the chart and everything else that comes with that jsfiddle.
Is there a way to accomplish this using formatter? Or vise versa, grab all of the supporting in the pointFormat?
I am using a stock chart to show trend data. On the backend I am getting what the valueSuffix should be (or valuePrefix as the case may be). I am also formatting the date display in the tooltip. Here is the important part of the series declaration:
...
name: 'Wages',
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
Here is the tooltip formatter:
...
tooltip: {
formatter: function () {
var s = '<b>';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + 'Q1';
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + 'Q2';
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + 'Q3';
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + 'Q4';
}
s = s + ' ' + Highcharts.dateFormat('%Y', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
});
return s;
}
}
...
Example jsFiddle.
If you notice the prefix for the dollar sign is not showing on the Wage series. I am not really sure what I am missing here.
The fix is to break up the label formatting and the value formatting into distinct sections. See example jsFiddle.
Set the chart.tooltip like:
...
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
xDateFormat: '%Q'
},
...
On the xAxis I replaced the label formatter with:
...
format: '{value: %Q}'
...
Inside the series I kept my suffix/prefix/decimals the same:
...
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
The big change came when I found that you can set your own date format label. I created one for Quarters (which is what I did the original cumbersome code for):
Highcharts.dateFormats = {
Q: function (timestamp) {
var date = new Date(timestamp);
var y = date.getFullYear();
var m = date.getMonth() + 1;
if (m <= 3) str = "Q1 " + y;
else if (m <= 6) str = "Q2 " + y;
else if (m <= 9) str = "Q3 " + y;
else str = "Q4 " + y;
return str;
}
};
I now get the tooltip to show the correct labels.
Unless something has changed in a recent version, you can't set your tooltip options within the series object. You can set anything that you would set in the plotOptions on the series level, but not the tooltip.
You can set a check within your main tooltip formatter to check for the series name, and apply the prefix accordingly.
{{edit::
This appears to be an issue of the formatter negating the valuePrefix setting.
Old question... but I spent hours looking for an acceptable way to do this.
/!\ : Before OP's answer...
If someone is looking for a way to use the formatter provided by highcharts (pointFormat attribute) (Doc here: LABELS AND STRING FORMATTING), you will find a (bad) example here :
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/pointformat/
Why "bad" ? because if you change :
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
with :
pointFormat: '{series.name}: <b>{point.y:,.1f}</b><br/>',
you add thousand separators (useless here) and force number format to 1 decimal ... and loose the suffix.
The answer is : series.options.tooltip.valueSuffix (or series.options.tooltip.valuePrefix)
Example :
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y:,.0f}{series.options.tooltip.valueSuffix}</b><br/>',
Hope this will save you some time.
Now OP's Answer :
Based on what I said, you can change :
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
});
For this :
$.each(this.points, function (i, point) {
s += '<br/><span style="color: ' + point.series.color + '">'
+ point.series.name + ':</span>'
+ (typeof point.series.options.tooltip.valuePrefix !== "undefined" ?
point.series.options.tooltip.valuePrefix : '')
+ point.y
+ (typeof point.series.options.tooltip.valueSuffix !== "undefined" ?
point.series.options.tooltip.valueSuffix : '');
});
This will add prefix and/or suffix if they exists
I want to display couple of points on a highcharts line chart which are big numbers.
e.g. 100,000, 10,000,000, 1,000,000,000
When I display these, the y axis automatically formats the number into 100 k, 10 M, 1,000 M etc but the tooltip still shows the actual big number.
Is it possible to show 1,000,000,000 as 1 B or 1000 M in the tooltip itself.
Example - http://jsfiddle.net/ynCKW/1/
I am trying to play with the numberFormat function but I dont think its the right function.
Highcharts.numberFormat(this.y,0)
Do I have to write a custom function which would do this formatting in the tooltip?
You can use the same logic as implemented in Highcharts core:
tooltip: {
formatter: function () {
var ret = '',
multi,
axis = this.series.yAxis,
numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
i = numericSymbols.length;
while (i-- && ret === '') {
multi = Math.pow(1000, i + 1);
if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
}
}
return ret;
}
},
And jsFiddle: http://jsfiddle.net/ynCKW/2/
EDIT for Highcharts v6:
We can call build-in method, which should be easier to maintain: http://jsfiddle.net/BlackLabel/ynCKW/104/
tooltip: {
valueSuffix: '',
formatter: function () {
var axis = this.series.yAxis;
return axis.defaultLabelFormatter.call({
axis: axis,
value: this.y
});
}
},
Piggybacking off #Pawel Fus, a slight tweak allows you to have negative currency values as well but with the negative outside the $ (i.e. -$100K versus -$-100k).
function () {
var isNegative = this.value < 0 ? '-' : '';
var absValue = Math.abs(this.value);
return isNegative + '$' + this.axis.defaultLabelFormatter.call({
axis: this.axis,
value: absValue
});
}
Here is a jsFiddle: http://jsfiddle.net/4yuo9mww/1/
Sample code:
formatToolTip: function() {
var tt = this.x + ' = ' + this.y + ' (this.percentage + ' %)';
return tt;
}
this.percentage is always undefined. I am a newbie working with highcharts 3.0.0
This is an old example of how you can use the formatter function to get the %. It relies on knowing the max value of the data, but you can use the getExtremes() method to pull that from the chart.
http://jsfiddle.net/jlbriggs/H3Q9h/5/
var pcnt = Highcharts.numberFormat((this.y / 415 * 100),0,'.');
http://api.highcharts.com/highcharts#Axis.getExtremes%28%29
replace the 415 in the equation with a variable set as the dataMax value of the getExtremes() method.