I have the following highcharts graph
https://jsfiddle.net/deemgfay/
and I am trying to display the "Consum Test" values in the tooltip but without adding them to the series. I just want to add Consum (l/100km)
Total Consum (l) to the series. Is that possible with hightcharts? Please see the screenshot below.
You can set the extra series to be hidden and ignored in legend:
visible: false,
showInLegend: false
Then use tooltip formatter function (useHTML must be enabled) to display points from all series in the shared tooltip regardless of their visibility:
formatter: function() {
var html,
originalPoint = this.points[0];
// header
html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";
// points
originalPoint.series.chart.series.forEach(function(series) {
var point = series.points.find((p) => p.x === originalPoint.point.x);
html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
});
return html;
}
Live demo: https://jsfiddle.net/kkulig/1oggzsx0/
API references:
http://api.highcharts.com/highcharts/tooltip.formatter
http://api.highcharts.com/highcharts/tooltip.useHTML
This can be done by using tooltip.formatter. Here I append to tooltip info based on index of current series from index of required extra array.
formatter: function() {
var s = '<b>' + this.x + '</b>';
var reqpoint = 0;
$.each(this.points, function() {
var reqpoint = this.point.index
s += '<br/>' + this.series.name + ': ' +
this.y.toFixed(2) + 'm';
if (this.series.index == 1) {
s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
}
});
return s;
},
Fiddle demo
Related
How do I make this: https://www.highcharts.com/stock/demo/candlestick-and-volume
with single line series like this:
https://www.highcharts.com/stock/demo/basic-line
Final chart should have single line series with volume
How do I display a single tooltip with the following information:
Date, Time:
Price:
Volume:
You can achieve it by setting tooltip.split = false and using tooltip.formatter callback.
Code:
tooltip: {
split: false,
formatter: function() {
var point = this.point,
chart = point.series.chart,
pointIndex = point.index,
date = Highcharts.dateFormat('%b %e, %H:%M', this.x),
volumePoint = chart.series[1].points[pointIndex],
text =
'<span style="color:' + point.color +
'">\u25CF</span> ' + point.series.name +
': <b>' + point.y + '</b><br/>' +
'<br><span style="color:' + volumePoint.color +
'">\u25CF</span> ' +
'Volume: <b>' + volumePoint.y +
'</b><br>' + date;
return text;
}
}
Demo:
https://jsfiddle.net/BlackLabel/9gq7Lv4r/
API reference:
https://api.highcharts.com/highcharts/tooltip.split
https://api.highcharts.com/highcharts/tooltip.formatter
I've created custom formatter function for highstocks.js:
var tooltip = [];
for (key in this.points) {//if point type is portfolio
if ( this.points[key].point.type == 'portfolio' ) {
tooltip[key] = '<span style="color:' + his.points[key].series.color +'">' + this.points[key].series.name + '</span>' + '<br/><b>'+ _('', 'Net assets: ') + _s(this.points[key].point.sum, 2) + '</b>' + '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
} else {
tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
}
}
var tl = '';
for (key in tooltip) {
tl += tooltip[key]
}
var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);
tl = date + '<br/>' +tl;
return tl;
The feature is that this function usues not only Y of a point, but also some additinal properties, that I have added to the point: such as type.
For points that are "portfolio" type the tooltop shoold be rendered differently and has to have much more data then for "regular" point type.
The problem that I've encountered that when conatiner div has small width, my template doesnt work, although it works fine when div's width is big.
Highstocks.js does default aggregation when renders chart to relativly small area: http://api.highcharts.com/highstock#plotOptions.area.dataGrouping
When points are groupped, they lose all additional attributes, leaving only Y property, so complex tooltop wont work.
To fix it I had to disable data groupping in chart options:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
Is ther a way to display complex tooltip on small chart without disabling dataGrouping?
The question is: 'How to group point.type'?
I guess you would like to group point by type, and then display n-points in that place? Or group point as is, but in options count number of types? What if user will define myCustomFancyProperty - what then? Aggregate all own properties from point? It's getting harder and harder.. what can I advice is to create an idea here with some explanation/solution.
You can always get from grouped point x-value (this.x), and then loop over all points (accessible via this.points[0].series.options.data), find the closest point to that timestamp and display required value.
as Pawel Fus suggested, I loop throught all points to find closest value and add additinal attributes for each groupped point.
Here is th whole formmater function.
formatter: function() {
var tooltip = [];
//Тултип
for (var key in this.points) {//Если точка - пользователь
//прочитаем тип
var closestX = 0;
for (var j in this.points[key].series.options.data ) {
if ( Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x) < diff ) {
closestX = j;
}
var diff = Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x);
}
this.points[key].point.type = this.points[key].series.options.data[closestX].type;
this.points[key].point.sum = this.points[key].series.options.data[closestX].sum;
this.points[key].point.netassets = this.points[key].series.options.data[closestX].netassets;
if ( this.points[key].point.type == 'portfolio' ) { //если точка не пользователь
tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>' +
'<br/><b>'+ _('', 'Сумма активов: ') + _s(this.points[key].point.sum, 2) + '</b>' +
'<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
} else {
tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
}
}
var tl = '';
for (key in tooltip) {
tl += tooltip[key]
}
//Дата
var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);
tl = date + '<br/>' +tl;
return tl;
},
Can someone post an example of a custom aggregate method in highchart?I want to create a custom aggregate method that groups the following points into a single point with the tool tip ?
I have an array that has the following data
array1 :['apple',2,4,10,12.5]
I want the above array to be represented in a single grouped point with a tool tip
that shows as follows
apple
no of apples : 2
min:4
max:10
mean:12.5
I would process the data to get it into a format highcharts recognizes and then add the extra data to the point object. You can reference that extra data in the tooltips formatter function:
$(function () {
var input = [['apple',2,4,10,12.5],
['pear',1,5,10,12],
['orange',3,4,10,13.5],
['grape',4,4,10,11.5]],
data = [],
categories = [];
for (i=0;i<input.length;i++) {
categories.push(input[i][0]);
data.push({x: i,
y: input[i][1],
myMin: input[i][2],
myMax: input[i][3],
myMean: input[i][4]});
}
$('#container').highcharts({
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>' +
'No. of ' + this.x + ': ' + this.y + '<br/>' +
'min : ' + this.point.myMin + '<br/>' +
'max : ' + this.point.myMax + '<br/>' +
'mean : ' + this.point.myMean;
}
},
xAxis: {
categories: categories
},
chart: {
marginRight: 50
},
series: [{
data: data
}]
});
});
http://jsfiddle.net/bhlaird/Du5Nw/
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
Using tooltip formatter we can display both the series name and value but when same is done using the plotoptions event mouseover am not able to get the series name and value
Tooltip: formatter
PlotOption:Mousover
mouseOver: function () {
$.each(this, function (i, e) {
$reporting.html('x: ' + this.x + 'Category: ' + this.series.name + ', y: ' +Highcharts.numberFormat(Math.abs(this.y)));
});
}
Example of using it in mouseover
mouseOver: function () {
console.log(this);
var series = this.series.chart.series,
x = this.x,
y = this.y,
output = 'x: ' + x + 'y: ' + Highcharts.numberFormat(Math.abs(y));
//loop each serie
$.each(series, function (i, e) {
output += ' Category: ' + this.name;
if(i>0) {
$.each(series[i].data,function(j,point){
if(point.x === x) {
output += ' y: ' + Highcharts.numberFormat(Math.abs(y));
}
});
}
});
$reporting.html(output);
}
}
},
http://jsfiddle.net/ZrTux/77