customize highcharts tooltip to show datetime

Question

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

Offshoot

Answer 1

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

Semele

Where is the ESEMPIO text from the code supposed to show? Also, this answer is pretty much a copy of the one posted a few hours earlier. – Afrikah

Answer 2

You should use xDateFormat in tooltip for customizing your format date
http://api.highcharts.com/highcharts#tooltip.xDateFormat

sample:
tooltip: {
           xDateFormat: '%Y-%m-%d'
         },

Passive

Answer 3

You can use {value:%Y-%m-%d} template filter.

For an example:

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'

Trifid

Where does headerFormat go? Can you provide a working sample? – Afrikah

Answer 4

You need to return a formatted date in the tooltip using tooltip formatter .

Here is the tooltip formatter API for your reference.

For formatting the date part, you can make use of Highcharts.dateFormat()

The format is a subset of the formats for PHP's strftime function.

You can also refer PHP's strftime for more date formats.

I managed to format your tooltip as below.

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

Corrinacorrine

Answer 5

I do this:

headerFormat: '{point.x:%e %b %H:%M}'

E.g.

"tooltip": {
            outside: true,
            split: false,
            shared: true,
            useHTML: true,
            headerFormat: '{point.x:%e %b %H:%M}',
            pointFormat: '<p style="font-size:12px;margin:0px;padding-top:1px;padding-bottom:1px;color:{series.color};">{series.name} <strong>{point.y}</strong></p>',
            valueDecimals: 2,
            backgroundColor: 'black',
            borderWidth: 0,
            style: {
                width: '150px',
                padding: '0px'
            },
            shadow: false
        },

Buzzer

Answer 6

As Quy Le suggested, the built-in xDateFormat property is the way to go, but it wasn't working for me. I finally realized that my issue was in the series data where I'd assigned Date objects to my x values instead of numbers (the date in milliseconds). Instead of { x: new Date('2020-01-01'), .. } it needed to be { x: Date.parse('2020-01-01'), .. }. After making this change, xDateFormat did the trick. It was tough to pin down since it wasn't causing any other issues with the chart (even the reformatting of my x axis labels were working fine).

Greenfinch

Answer 7

Change in tooltip to add formatter:

tooltip: {
            borderRadius: 5,
            useHTML: true,
            formatter: function () {

      var date = new Date(this.x);
      var year = date.getFullYear();
                return '<div class="tooltip_box"><div><span class="seriesHeading">' + year  +
                    '</span> </div> <span class="seriesName">' + this.series.name +
                    ': </span><span class="seriesPoint" style="color:' + this.series.color + '; ">' + this
                        .y + '</span></div>';
            }
        },

Edana

Answer 8

The above solutions are fine but if you want to show the date in the header section of the tooltip you can do this

In the headerFormatter you can get the formatted date by {point.key}

So the code will be:

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

If you want to further format the date you can add the property xDateFormat

So the code will be like this:

tooltip: {
               headerFormat: '<b>{series.name}, Date: {point.key}</b><br>',
               pointFormat: '{point.y} Kg'
               xDateFormat: '%B, %Y',
         }

Currently these formats are supported:

* %a: Short weekday, like 'Mon'.
* %A: Long weekday, like 'Monday'.
* %d: Two digit day of the month, 01 to 31.
* %e: Day of the month, 1 through 31.
* %b: Short month, like 'Jan'.
* %B: Long month, like 'January'.
* %m: Two digit month number, 01 through 12.
* %y: Two digits year, like 09 for 2009.
* %Y: Four digits year, like 2009.
* %H: Two digits hours in 24h format, 00 through 23.
* %I: Two digits hours in 12h format, 00 through 11.
* %l (Lower case L): Hours in 12h format, 1 through 11.
* %M: Two digits minutes, 00 through 59.
* %p: Upper case AM or PM.
* %P: Lower case AM or PM.
* %S: Two digits seconds, 00 through 59

Amory

Answer 9

As of Oct. 2023, these are the available formats:

%a: Short weekday, like 'Mon'
%A: Long weekday, like 'Monday'
%d: Two digit day of the month, 01 to 31
%e: Day of the month, 1 through 31
%w: Day of the week, 0 through 6
%b: Short month, like 'Jan'
%B: Long month, like 'January'
%m: Two digit month number, 01 through 12
%y: Two digits year, like 09 for 2009
%Y: Four digits year, like 2009
%H: Two digits hours in 24h format, 00 through 23
%k: Hours in 24h format, 0 through 23
%I: Two digits hours in 12h format, 00 through 11
%l: Hours in 12h format, 1 through 12
%M: Two digits minutes, 00 through 59
%p: Upper case AM or PM
%P: Lower case AM or PM
%S: Two digits seconds, 00 through 59
%L: Milliseconds (naming from Ruby)

Reference: https://api.highcharts.com/class-reference/Highcharts.Time

Yellowwood