I am trying to display a tooltip where the content is loaded asynchronously. The content loads fine, however the tooltip is drawn on top of the point, which can get very messy.
How can I force the tooltip to be rendered either above or below the point?
My formatter function looks something like this:
tooltip: {
formatter: function (tooltip) {
let text = 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>'
// More text set asynchronously
setTimeout(function () {
tooltip.label.attr({
text: text +
'<br> more details here <br>' +
'more details here <br>' +
'more details here <br>' +
'more details here <br>'
});
}, 5)
return text
}
}
See JSFiddle for a full example of the issue.
You can use attr method also to change y tooltip position:
setTimeout(function () {
tooltip.label.attr({
text: text +
'<br> more details here <br>' +
'more details here <br>' +
'more details here <br>' +
'more details here <br>',
y: tooltip.now.y - 50
});
}, 2000)
Live demo: https://jsfiddle.net/BlackLabel/m14b7s6f/
Related
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
I am trying to make the tooltip when it is 100 + and 1000 + Have a symbol after it on the toolbar but also have it so that shared: true. Also on the graph when it is say 2394 I am after it to round it down to 2.39 so the graph is not so large and then on the tool bar it would show 2.39K.
I have tried quite a bit and I am not able to figure this out look all over stack overflow and not found anything.
http://jsfiddle.net/sb7n32zn/22/
This is what i currently have:
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
}
You need to use a tooltip.formatter which and detect values > 1000. Then use Highcharts.numberFormat and convert number.
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 (numericSymbolDetector > 1000) {
value = H.numberFormat(value / 1000, 2, '.','' ) + 'k';
}
txt += '<span style="color:' + point.series.color + '">' + point.series.name + ': <b>' + value + '</b><br/>';
});
return txt;
}
Example:
http://jsfiddle.net/k8783k80/
I did a pollution table based on a heat map chart, the tooltip use formatter function. I would like to know how can I make the tooltip to show the different categories of data (dataClasses name in colorAxis) when hover the mouse (ex: Norma, Regular, etc..) instead of showing the values, like it does now ( 90 µg/m³, 220 µg/m³, etc...)
Here's the table: https://jsfiddle.net/Ruloco/58q60968/
Here's the tooltip code:
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br><b>' + this.point.value + '</b> µg/m³ <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
Thanks in advance!
You can access a point's data class name via this.series.colorAxis.dataClasses[this.point.dataClass].name.
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br><b>' +
this.series.colorAxis.dataClasses[this.point.dataClass].name + '</b><br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
example: https://jsfiddle.net/58q60968/6/
I have the following question:
How can I customize the chart tooltip using Highcharts.js
library?
any help is appreciated.
If you want to customize the tooltip of your highcharts.js chart, you can do it defining a formatter
for the tooltip property of your chart_object, like this:
var chart_object = {
(...)
tooltip: {
formatter: function() {
return '<span>' + 'My HTML ' + this.x + '</span> : <b>' + this.y + '</b>';
}
},
(...)
}
You will use the chart_object later to initialize your Highcharts chart:
var chart = new Highcharts.Chart(chart_object );
I hope it helps.
I want to show the value of open, close, high and low for a symbol but it seems highstock only displays that value when chart type is ohlc or candlestick but not in line. My workaround for this problem is producing two chart with same data, line(making it visible) and ohlc(making it invisible) and extracting open, close, high and low from second type and displaying it in tooltip. I'm sure this is not a right way. Does anyone has any solution.
My tooltip formatter
formatter: function() {
var s=' ';
$.each(this.points, function(i, series) {
//when the series is of type 'line', series.point.open is undefined but works great on 'ohlc' type
n=new Date(series.point.x);
s += 'Open: <span style="font-weight:bold">' +series.point.open + '</span> Close: <span style="font-weight:bold">' +series.point.close + '</span> High: <span style="font-weight:bold">'+ series.point.high + '</span> Low: <span style="font-weight:bold">' + series.point.low + '</span>';
});
return s;
}
http://jsfiddle.net/7G9Cj/4/
Solved it. Here is the solution in case someone needs it.
formatter: function() {
var s = ' ';
$.each(this.points, function(i, series) {
for (i = 0; i < dataLength; i++) {
if (ohlc[i][0] == series.point.x) //ohlc holds my main data
{
s += 'Open: <span style="font-weight:bold">' + ohlc[i][1]
+ '</span> Close: <span style="font-weight:bold">' + ohlc[i][4]
+ '</span> High: <span style="font-weight:bold">' + ohlc[i][2]
+ '</span> Low: <span style="font-weight:bold">' + ohlc[i][3]
+ '</span>';
break;
}
}
}
});
return s;
}