Styjun

I've already figured out how to make a chart using highcharts where there are three variables- one on the X axis, one on the Y axis, and one on the tooltip. The way to do this is to add the following to the tooltip:

tooltip: 
 formatter () 
 // this.point.x is the timestamp in my original chartData array
 const pointData = chartData.find(row => row.timestamp === this.point.x)
 return pointData.somethingElse
 
 

See this fiddle for the full code:
https://jsfiddle.net/m9e6thwn/

I would simply like to do the same, but with two series instead of one. I can't get it to work. I tried this:

tooltip: 
 formatter () 
 // this.point.x is the timestamp in my original chartData array
 const pointData = chartData1.find(row => row.timestamp === this.point.x)
 return pointData.somethingElse
 const pointData2 = chartData2.find(row => row.timestamp === this.point.x)
 return pointData2.somethingElse
 
 

Here is the fiddle of the above: https://jsfiddle.net/hdeg9x02/ As you can see, the third variable only appears on one of the two series. What am I getting wrong?

There are some issues with the way you are using the formatter now. For one, you cannot have two returns in the same function without any if clauses. That will mean that only the first return will be used.

Anyway, here are some improvements I suggest you do for your code.

Add the extra information for each point to highcharts, that makes it a lot easier to access this information through highcharts. E.g. in a tooltip. You can set the data like this:

chartData1.map(function(row) 
 return 
 x: row.timestamp, 
 y: row.value, 
 somethingElse: row.somethingElse
 
)

If you do that, then returning the correct tooltip for each series is a simple matter of doing this:

tooltip: 
 formatter () 
 // this.point.x is the timestamp in my original chartData array
 return this.point.somethingElse
 

Working JSFiddle example: https://jsfiddle.net/ewolden/dq7L64jg/6/

If you wanted more info in the tooltip you could then do:

tooltip: 
 formatter () 
 // this.point.x is the timestamp in my original chartData array
 return this.point.somethingElse + ", time: " + str(this.x) + ", value: " + str(this.y)
 

Addtionally, you need to ensure that xAxis elements, i.e. your timestamps are sorted. This is a requirement for highcharts to function properly. As it is, your example is reporting

Highcharts error #15: www.highcharts.com/errors/15

in console, because chartData2 is in reverse order. It looks okay for this example, but more complicated examples can lead to the chart not looking as you expect it to.

For this example using reverse is easy enough: data: chartData2.reverse().map(function(row) return x: row.timestamp, y: row.value, somethingElse: row.somethingElse)

Working JSFiddle example: https://jsfiddle.net/ewolden/dq7L64jg/7/