xDateFormat string doesn't apply to large amounts of data

Question

I have an issue that I have been able to replicate on JFiddle. Link: http://jsfiddle.net/h5sSR/

$(function() {
var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container'
    },

    tooltip: {
        backgroundColor: {
            linearGradient: {
                x1: 0, 
                y1: 0, 
                x2: 0, 
                y2: 1
            },
            stops: [
                [0, 'white'],
                [1, '#EEE']
            ]
        },
        xDateFormat: '%m/%e/%y %H:%M',
        borderColor: 'gray',
        borderWidth: 1
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
});

The Problem: I need the xDateFormat attribute to be applied under ToolTip at all times (month / day / year hour : minute). It works perfectly when you have a small amount of data selected. It uses a different format when you have a large amount of data selected to view.

The Example: Try it on the JFiddle (link above). It initializes to a small amount of data visible and when you hover, you will see the Date like so: 12/3/12 0:0. That's perfect. Now drag the navigator to the beginning and hover on the graph, the DateFormat changes to (Week from Day of Week, Month Day, Year).

How to Solve: Why is this happening and how can I apply the xDateFormat attribute all the time regardless of how much data is being displayed?

Answer 1

Take a look at docs: http://api.highcharts.com/highstock#tooltip.xDateFormat

The format for the date in the tooltip header. If data grouping is used, the default is a smart guess based on how close the closest points are. It is pulled from the #plotOptions.dataGrouping.dateTimeLabelFormats array.

So here you can find, what should be changed: http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.dateTimeLabelFormats - apply to all of forms the same format and will be working fine.

Answer 2

Here is the new code that solved this (after Pawel Fus linked me to the solution):

plotOptions : {
                    series : {
                        dataGrouping : {
                            dateTimeLabelFormats : {
                                millisecond: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                second: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                minute: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                hour: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                day: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                week: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                month: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                year: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M']
                            }
                        }
                    }
                },

That will "Get 'er done". And here is the updated JFiddle Link: http://jsfiddle.net/h5sSR/1/