score:60

Accepted answer

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

score:0

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).

score:6

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
        },

score:15

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.';
                }
            }

score:21

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/>'

score:56

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

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

Related Query

More Query from same tag