Highcharts - Aligning dateTime series for shared t

Question

I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.

This fiddle will help demonstrate the problem. Fiddle

If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.

May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add

tooltip: {
        shared: true,
}

Thank you.

Answer 1

Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:

1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.

2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)

3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.

4) use the formatting options on the x axis labels to show only the time portion of the label and not the date

In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.

//use the current date as the base - the date doesn't matter, just the time
var d             = new Date();
var date          = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart    = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour

.

series: [{
   name : 'Apr 17, 2015',
   data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
   name : 'Jun 12, 2015',
   data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]

Example:

• http://jsfiddle.net/jlbriggs/b3t7ueam/

[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):

• http://jsfiddle.net/jlbriggs/v76u9w2L/

]]

Answer 2

I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.

There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:

<script src="https://code.highcharts.com/modules/data.js"></script>

and

data: {
    csv: csvData
}

The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.