How to auto-format dates in custom tooltip formatter? - highcharts

Question

Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.
http://jsfiddle.net/9Fke4/

Answer 1

You can use dateFormat()
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
}
},
http://jsfiddle.net/9Fke4/1/

Answer 2

FWIW, this was answered in a Highcharts issue on Github
formatter: function() {
var tooltip = this.series.chart.tooltip,
item = this.point.getLabelConfig(),
header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);
return header + this.y;
}
Corresponding fiddle:
http://jsfiddle.net/9Fke4/12/
If you are using a shared series:
tooltip: {
formatter: function (tooltip) {
var header,
s = [];
$.each(this.points, function(i, point) {
if(header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(point.y);
});
return header + s.reverse().join('<br>');
},
shared: true
}

Answer 3

conver the raw milliseconds to a date object using
var currentDate = new Date (tome in milliseconds)
in the tootip/formatter function you have defined.
this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.
build a string with the above info and return.
I hope this will help you.

Answer 4

The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):
http://jsfiddle.net/uG3sv/