Develop Reference

Highcharts complex tooltip formatting issue with embedded html link

I am trying to format the tooltip in a highcharts bubble chart
There is a lot of information I'd like to display with custom formats etc so I'm using the formatter function. It is all working fine except for the last line which is a html link (href tag). I want to be able to click on this link in the tooltip and be redirected to the new page however, currently, even though I can see the row highlighted with a link, I'm not being able to click on the link when it renders in the tooltip
Here's the code
const chartOptions = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
height: 600,
},
title: {text: null},
legend: {
enabled: true
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e-%b', new Date(this.x)) + ' ' + this.y + '</b><br/>' +
'<b>' + 'ACV: ' + '</b>'+ '$' + Math.round(this.point.ACV / 1000).toFixed(1) + 'K' + '<br/>' +
'Type: ' + this.point.OPP_COB + '<br/>' + 'Name: ' + this.point.REP_NAME + '<br/>' +
'Link: ' + ' Click here '
}
},
}
I've tried lots of options for a while but haven't had any luck. Any help would be much appreciated. Thanks

You need to set pointerEvents property to 'auto':
tooltip: {
style: {
pointerEvents: 'auto'
}
}
Live demo: http://jsfiddle.net/BlackLabel/7nrvsp5y/
API Reference: https://api.highcharts.com/highcharts/tooltip.style

Highcharts passing variable to tooltip

Hi I am trying to pass a variable to my tooltip using setData.
Here is a piece of my code explaining how I am setting the chart data, this code doesn't pass the sensorValue to my tooltip yet:
nitrogenDioxide = [];
$.each(data['NO2'], function(key, value) {
nitrogenDioxide.push([value.ts * 1000, value.rating]);
});
chart_2_1.series[0].setData(nitrogenDioxide);
chart_2_1.series[0].update({name:'Nitrogen Dioxide'}, true);
Here is the code I used to create my tooltip:
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var tooltipcontent = '<b>' + moment.unix((this.points[0].key / 1000)).format("DD/MM/YYYY HH:mm"); + '</b>';
tooltipcontent += '<table style="width:100%">';
$.each(this.points, function () {
console.log(this);
tooltipcontent += '<tr><td>' + this.y.toLocaleString() + '</td></tr>';
tooltipcontent += '<tr><td>' + sensorValue + '</td></tr>';
});
tooltipcontent += '</table>';
return tooltipcontent;
}
}
As you can see I have a variable called sensorValue in my tooltip. In the foreach loop I have a rating value (y-axis) and a sensor value. I want to pass that sensor value to me tooltip.
I have seen multiple ways of doing this online but none of them set the data the way I do, they do it like so:
new Highcharts.Chart( {
...,
series: [ {
name: 'Foo',
data: [
{
y : 3,
myData : 'firstPoint'
},
{
y : 7,
myData : 'secondPoint'
},
{
y : 1,
myData : 'thirdPoint'
}
]
} ]
} );
I have tried something like this but didn't know how to call this extra value in the tooltip:
nitrogenDioxide = [];
$.each(data['NO2'], function(key, value) {
nitrogenDioxide.push([value.ts * 1000, value.rating, value.value]);
});
In the above code I have pushed the sensor value into the nitrogenDioxide[] array.
I have tried my best to explain what I am trying to do, in my head the explanation makes sense but if it doesnt to you please let me know. Thank you in advance for any help.

I hope I understood correctly what is your issue and the demo posted below will be helpful for you.
When an array with an additional value is passed (sensorValue in your case) it can be retrieved inside formatter using this approach:
get hovered point index: this.point.index
use the point index to get additional value from this.series.userOptions.data array
Code:
Highcharts.chart('container', {
tooltip: {
formatter: function() {
var point = this.point,
series = this.series,
pointIndex = point.index,
text,
additionalValue;
text = '<span style="color:' +
this.color + '">\u25CF</span> ' +
series.name +
': <b>' +
this.y +
'</b><br/>';
additionalValue =
series.userOptions.data[pointIndex][2];
text += '<br> Additional value: ' +
additionalValue;
return text;
}
},
series: [{
data: [
[1, 2, 'aaa'], // 'aaa' is an additional value
[2, 5, 'bbb'],
[3, 9, 'ccc']
]
}],
});
Demo:
https://jsfiddle.net/BlackLabel/3g6om1fw/1/

How to include data from point in Highcharts xAxis label?

I am trying to include some extra data from my points in the xAxis label of a Highcharts line chart.
I'm creating my points like this. xAxis is 'datetime' type, and I'm using custom tickPositions (this part works fine).
for (row of results) {
var point = {x:Date.parse(row.time), y:row.value, magicNumber:row.ID};
data_series.data.push(point);
chartConfig.xAxis.tickPositions.push(Date.parse(row.time));
}
In the tooltip I'm able to do the following (this works):
tooltip: {
formatter: function() {
return 'ID: ' + this.point.magicNumber + ' Value:' + this.point.y.toFixed(3);
},
},
How do I do the equivalent in the xAxis formatter? Not clear from the docs if this is possible.
xAxis: {
type: 'datetime',
labels: {
rotation: 90,
formatter: function () {
var ID = **What goes here to obtain magicNumber?**
var datetime = new Date(this.value);
return ID.toString() + ' ' + datetime.toISOString();
}
},
tickPositions: []
}

Try this, console.log(this); should give you a hint if my solution doesn't works.
xAxis: {
type: 'datetime',
labels: {
rotation: 90,
formatter: function () {
console.log(this);
var ID = this.chart.series[0].data[this.pos].magicNumber;
var datetime = new Date(this.value);
return ID.toString() + ' ' + datetime.toISOString();
}
},
tickPositions: []
}

Both formatters has different context, so one way out of that is by iterate on every point of your data (inside of the xAxis.labels.formatter function), find the point which has the same x as this.value, and assign it to some variable. It should be enough, but there is a likelihood of a returning empty object, when none of points won't fit to the tick value.
xAxis: {
type: 'datetime',
labels: {
formatter() {
var points = this.chart.userOptions.series[0].data
var sameTimestampPoint = points.filter(p => p.x === this.value)[0]
var magicValue = sameTimestampPoint ? sameTimestampPoint.magicValue : ""
return magicValue + '<br/>' + this.value
}
}
}
Live example: https://jsfiddle.net/2r8z5wny/

Negative and positive in same direction in highchart

Helo,
It's possible showing the negative and positive series in the same diretion using highchart?
Like this:
expected result

Yes it is possible, But you need to fudge it. Make the label show negative, but use absolute value(always positive) of the figure.
After your comment and link to the code, I was able to find a solution that I think will work for you.
//tooltip function
function format_tt(inp) {
index = this.point.index;
var s = '<b>' + this.x + '</b>';
var point = this.point;
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>: ' + point.series.name + ': ' + tdata[index];
return s;
}
//Data
tdata = [20, -20];
//Rework the data to use only the positive values, but only for our graph. Wherever we need the true values, we reference tdata.
data = tdata.map(function(_) {
return Math.abs(_);
});
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
legend: {
align: "center",
labelFormatter: function() {
var count = 0;
for (var i = 0; i < this.yData.length; i++) {
count += this.yData[i]; //change this to tdata[i] to get the true value;
}
return this.name + ' (' + count + ')';
},
y: 3
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Receitas', 'Despesas']
},
credits: {
enabled: false
},
series: [{
name: 'Receitas e despesas',
data: data //Our data, AFTER the conversion
}],
tooltip: {
formatter: format_tt //our tooltip function.
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
jsFiddle: http://jsfiddle.net/zb2edyLe/3/
tdata is now where you'd put your data. Not the original place, Please review the comments within the code as that explains what I've done.

Tooltip stacked column with 3 values array

I have a json code like this
[[1385420403000,9.86,6.91],[1385506802000,11.89,6.57],[1385593203000,14.11,10.58],[1385679602000,9.1,8.9],[1385766003000,13.59,7.53],[1385852402000,10.68,6.69],[1385938803000,11.03,10.52],[1386025202000,11.16,8.18],[1386111603000,12,5.76]]
I want to display the 3rd value (this.z) on tooltip with highstock.
This is my code to select data for the stacked column.
var date = [],
hp = [],
hc = [],
datalength = data.length;
for (i = 0; i < datalength; i ++) {
date.push([
data[i][0], // the date
]);
hp.push([
data[i][0], // the date
data[i][1], // hp
]);
hc.push ([
data[i][0], // the date
data[i][2], //hc
])
}
My tooltip :
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
},
formatter: function() {return ' ' +
Highcharts.dateFormat('%A %d %b %Y', this.x) +""+'<br />'+
'HP : ' + this.y + " kwh"+'<br />' +
'Prix HP : ' + Highcharts.numberFormat((this.y*0.1467),2)+" €" +'<br />'+
'HC : ' + this.z + " kwh"+'<br />' +
'Prix HC: ' + Highcharts.numberFormat((this.z*0.1002),2)+" €"+'<br />' +
'Prix total : ' + Highcharts.numberFormat(((this.y*0.1467)+(this.z*0.1002)),2)+" €";
},
},
And the series :
series: [{
type: 'column',
name: 'HP',
data: hp,
},{
type: 'column',
name: 'HC',
data: hc,
}]
this.z is undefined. How can i replace it ?

To do this you would need to make a 3D set of data such that hp would look like:
{
type: 'column',
name: 'HP',
data: [
{x:1385420403000, y:9.86, note:6.91},
{x:1385506802000, y:11.89, note:6.57},
{x:1385593203000, y:14.11, note:10.58},
....
]
}
To do that you would set you hp filler loop to look something like:
hp.push([
data[i][0], // the date
data[i][1], // hp
data[i][2] // the note item.
]);
If you look at your hp.push code you have a dangling comma and you are never actually looking at the 3rd element in your array.
Then in your tooltip you would reference this.note.