Highcharts custom attribute with datetime line chart

Question

I have a line chart with xAxis values as timestamps and yAxis values has a number. The definition is easy:

xAxis : [ {
    type : 'datetime'
    labels: {
        formatter: function(){
            // Custom function formatting timestamps
        }
    }
]

Data from my API come like this and works great.

data:[
    [1558648800, 10256],
    [1558648801, 10258],
    [1558648802, 10259]
]

The issue now is that I need to show a message in a tooltip, so I found some solutions like https://stackoverflow.com/a/8515679.

data: [
    {y : 10256, myData : 'Message 1'},
    {y : 10258, myData : 'Message 2'},
    {y : 10259, myData : 'Message 3'}
]

In this solution xAxis data dissapears so the unique way that I found is using name attribute as xAxis, but I thought that is not the best while managing timestamps and autommatic tikcIntervals.

(I delegate intervals on Highcharts, doesn't matter).

So my question is, what it would be the best way to create that extra attribute (myData) for tooltip, considering datetime with timestamps line chart?

Thanks in advance

Answer 1

You can use data with x, y and myData properties:

series: [{
    data: [{
            x: 1558648800,
            y: 10256,
            myData: 'Message 1'
        },
        {
            x: 1558648801,
            y: 10258,
            myData: 'Message 2'
        },
        {
            x: 1558648802,
            y: 10259,
            myData: 'Message 3'
        }
    ]
}]

Or define the data as an array and use keys property:

series: [{
    keys: ['x', 'y', 'myData'],
    data: [
        [1558648800, 10256, 'Message 1'],
        [1558648801, 10258, 'Message 2'],
        [1558648802, 10259, 'Message 3']
    ],
}]

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

API Reference:

https://api.highcharts.com/highcharts/series.line.data

https://api.highcharts.com/highcharts/series.line.keys