Highcharts changing tooltip datetime with formatter

Question

I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels).

The problem is that changing the format of the datetime to match locale is not dynamic with Highcharts. I know I could have users change the dateTimeLabelFormats to match their locale, but I'm looking to leverage moment.js and their locale formatting built in.

I only need to change the datetime in these charts and nothing else.

When I try this code below, it gives me the locale leverage I'm looking for, but the tooltips are merged into 1 box and doesn't have that same feel as default.

tooltip: {
    enabled: true,
    dateTimeLabelFormats: {
        //minute: '%e %b %H:%M',
        hour: '%e %b %H:%M'
    },
    // For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
    formatter: function() {
        var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';  
          $.each(this.points, function(i, point) {
            toolTipTxt += '<br/><span style="color:'+ point.series.color +'">  ' + point.series.name + ': ' + point.y+'</span>';
        });
        return toolTipTxt;
    },
    crosshairs: true,
    shared: true
},

Is there a way to emulate default tooltip with the formatter? Individual "bubbles" for the values and the timestamp hovering at the bottom?

Is it possible to use xDateFormat with moment.js somehow?

Pat Pat · Accepted Answer · 2019-02-07T00:55:29

I found a solution that works, right from the Highcharts API documentation for tooltip split.

The jsfiddle example from the API documentation had everything I needed (except moment.js).

I must have overlooked this 100 times today. Here's the final code that worked for me, and a screenshot of the result.

Now the tooltip's header will be in the right locale without the user changing any code.

tooltip: {
    enabled: true,
    // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
    formatter: function () {
        // The first returned item is the header, subsequent items are the points
        return [moment.unix( this.x / 1000).format("LLL")].concat(
            this.points.map(function (point) {
                return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
            })
        );
    },
    split: true,
},

Highcharts changing tooltip datetime with formatter

1 Answers