Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

customize highcharts tooltip to show datetime

I'm developing a project that is expected to show this graph: http://jsfiddle.net/Kc23N/

When I click a point (tooltip) I want to show a date understandable, not the value in milliseconds.

I think needs to change this piece of code:

tooltip: {       headerFormat: '<b>{series.name}</b><br>',       pointFormat: '{point.x} date, {point.y} Kg',                         } 

how do I do? any kind help is appreciated.

Thanks

like image 802
SkyNet_citizen Avatar asked Jun 10 '13 22:06

SkyNet_citizen


1 Answers

You can use moment.js to get the values formatted, but Highcharts has it's own date formatting functionality which would be more idiomatic with Highcharts. It can be attached onto the tooltip option in the highcharts constructor like so:

        tooltip: {             formatter: function() {                 return  '<b>' + this.series.name +'</b><br/>' +                     Highcharts.dateFormat('%e - %b - %Y',                                           new Date(this.x))                 + ' date, ' + this.y + ' Kg.';             }         } 

You may want to also add the dateTimeLabelFormats object with the options you need for your dates, under the xAxis.

I did this example with your code

like image 173
rscnt Avatar answered Sep 21 '22 00:09

rscnt