I have the following code

var rs2 = new Rickshaw.Graph({
   element: document.querySelector('#rs2'),
   renderer: 'area',
   stroke: true,
   interpolation: 'basis',
      
   series: [{
     data: series_TOTAL,
     color: 'yellow',
   }]
});
rs2.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail({
   graph: rs2,
   formatter: function(series, x, y, z) {
   var date = '<span class="date"><center>' + unixToHour(x) + '</center></span>';
   var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
   var price = '<span class="date"><center>' + z + '€</center></span>';
   var content = swatch + Math.round(parseFloat(y) * 10) / 10 + ' Watts<br>' + date + price;
   return content;

   }
});

series_TOTAL looks like this:

[{"x": 1638983953,"y": 159,"z": 0.0454882},{"x":38983953,"y": 159,"z": 0.0457761},...]

I don't know how to reference z inside the tooltip so that it returns the value. Currently z returns something like "Wed, 08 Dec 2021 16:35:05 GMT".

In the above code, if I change z for series.data[n].z, it returns the value I want but since series.data is an array, I don't know how to obtain n so that it shows the value corresponding to the part of the graph I'm hovering.