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/
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 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/
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/
When you hover over the bars you will see the raw epoch times.
How can I convert it to a readable date format, something like this:
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', new Date(this.series.data[0].low)) + ', ' +
Highcharts.dateFormat('%m-%d-%Y', new Date(this.series.data[0].high));
}
},
Here is my JSFiddle, http://jsfiddle.net/6qsvjark/157/.
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.