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/.
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 have a problem with a area chart that I have created.
The time in the tooltip does not correspond with the time on the xAxis (se image for example)
The time in the toolstip is right, the xAxis is however shifted two hours behind in time.
Settings for the chart (modified for brevity)
var chart = new Highcharts.Chart({
tooltip: {
dateTimeLabelFormats: {
day:"%A, %b %e, %Y, %H:%M"
},
formatter: function() {
var tt = '',
newDate = new Date(this.key).toLocaleString();
tt = '<b>' + newDate + ':</b> <br/>' + '<b>' + this.series.name + '</b>' + ': ' + this.y;
return tt;
}
},
xAxis: {
type: 'datetime'
}
});
This is how I draw the series:
for (var i = 0; i < newValue.length; i++) {
chart.series[0].addPoint([newValue[i].tValue, newValue[i].value], false, false);
}
newValue[i].tValue is in epoch, for example 1493097600000
In my case setting useUTC to false helped.
Highcharts.setOptions({
global: {
useUTC: false
}
});
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'm using custom formatter for yaxis labels of Highstock.
it works except as it should.
I want to it returns for example "15 bar" instead of "15000 bar" as when default formatter does.
Here is my snippet code:
yAxis.labels.formatter = "function(){return Highcharts.numberFormat(this.value, 0, ',') +' " + portSetting.QuantityUnit + "'}";
tanks.
The formatter should be a function and it looks like you are assigning a string.
So instead of:
yAxis.labels.formatter = "function(){return Highcharts.numberFormat(this.value, 0, ',') +' " + portSetting.QuantityUnit + "'}";
you should write a function like:
yAxis.labels.formatter = function () {
return
Highcharts.numberFormat(this.value, 0, ',') +
' "' + portSetting.QuantityUnit + '"';
};