HighCharts Playing with YAxis & TimeStamps

Question

I will need to display objects (a doublebar chart for each object). The structure of the object is:

{
dates: (5) ["2018-12-26", "2018-12-27", "2018-12-28", "2018-12-31", "2019-01-02"]

formattedDates: (5) ["2018/12/26", "2018/12/27", "2018/12/28", "2018/12/31", "2019/01/02"]

formatPoints2: (5) [1545945000000, 1546026562061, 1546284847056, 1546465543023, 1546545993086]

points: (5) ["2018-12-27T10:36:24.893", "2018-12-28T17:29:56.517", "2018-12-31T05:48:41.587", "2019-01-01T10:10:09.683", "2019-01-03T10:36:42.002"]

points2: (5) ["2018-12-27T16:10", "2018-12-28T14:49:22.061", "2018-12-31T14:34:07.056", "2019-01-02T16:45:43.023", "2019-01-03T15:06:33.086"]

formatPoints: (5) [1545924984893, 1546036196517, 1546253321587, 1546355409683, 1546529802002]
}

I took the liberty of converting the points and points 2 array using date.getTime() to get the formatPoints and formatPoints2

what I need to do is plot the time of the timestamps vs the dates .

e.g. points[0] = 2018-12-27T10:36:24.893, dates[0] = 2018-12-26
plot 10:36:24 vs 2018-12-26 and so on for each time in the array

an extra catch I need to display the FULL timestamp in the tool-tip (2018-12-27T10:36:24.893) on the chart when you hover over the bar for that point

the chart is a double bar chart where points&points2 is plotted against dates.

Answer 1

In your case the key is to set the right axis types. For timestamp values on yAxis the best type will be datetime and for dates on xAxis - category . Please check the example below and let me know if everything is fine.

var series = [{data: []}, {data: []}];

data.points.forEach(function(point, i){
    series[0].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points[i],
        y: data.formatPoints[i]
    });

    series[1].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points2[i],
        y: data.formatPoints2[i]
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    xAxis: {
        type: 'category'
    },
    tooltip: {
        pointFormat: '{point.tooltipText}'
    },
    yAxis: {
        min: 1545945000000,
        max: 1546529802002,
        type: 'datetime'
    },
    series: series
});

Live demo: http://jsfiddle.net/BlackLabel/asm64f5r/

API: https://api.highcharts.com/highcharts/xAxis.type