How to set hover text dynamically in plotly javascript

I have a plotly graph in javascript which displays (timestamp, #bits) points. I want to set hover text in order to display (only) #bits in a human-readable format(e.g. as kbit/s, Mbit/s etc). I have a formatHumanReadable(bits) function which takes bits and returns the formatted value, that I want to use it to format hover text over the point. But since now I couldn't make it work.

I know hover text can be set statically by text and hoverinfo fields, I could map my function to bits array and obtain formatted array, but I need to do it dynamically because I get traces generated by another function, ready-to-fly and I also think if there are so many points it would be inefficient generating all labels at once.

This hover example from plotly's site doesn't seem like working; adding/removing plotly_hover doesn't change its behavior on a hover event. But based on the example I tried to do something like this. I need some help to understand how to modify my code.

https://codepen.io/anon/pen/mxVMKo?editors=1010

function formatHumanReadable(bits){
 var kbit = 1024;
 var mbit = kbit * 1024;
 var gbit = mbit * 1024;
 var tbit = gbit * 1024;

 if((bits >= 0) && (bits < kbit)) {
    return bits + ' bps';
 } else if((bits >= kbit) && (bits < mbit)) {
    return (bits / kbit).toFixed(2) + ' kbit/s';
 } else if((bits >= mbit) && (bits < gbit)) {
    return (bits / mbit).toFixed(2) + ' Mbit/s';
 } else if((bits >= gbit) && (bits < tbit)) {
    return (bits / gbit).toFixed(2) + ' Gbit/s';
 } else if(bits >= tbit) {
    return (bits / tbit).toFixed(2) + ' Tbit/s';
 } else return bits + ' bps';

}

var trace1 = {
     name : 'Bytes ',
     type : 'area',
     mode : 'none',
     fill : 'tonexty',
     x : [1520802000,1520802300,1520802600,1520802900,1520803200,1520803500,1520803800,1520804100,1520804400,1520804700,1520805000,1520805300],
     y : [830.06400875048,18148.230796443,1605.238094555,3400.299039783,3739.3583195955,16700.982221443,518.7137572601,1340.7242871209,318.48341563924,13200.594607085,361.41714506336,218.35344652301]
 };



  var data = [trace1];
  var layout = {
    hovermode : 'closest',
    xaxis: {
      showticklabels : false,
      showgrid : false
    },
    yaxis: { autorange : true }
  };

  var myPlot = document.getElementById('myDiv');
  var hoverInfo = document.getElementById('hoverinfo');

  Plotly.plot('myDiv', data, layout);

  myPlot.on('plotly_hover', function(data){
    //modify d.data.hovertext ???
      var infotext = data.points.map(function(d){
        return (d.data.name+': x= '+d.x+', y= '+ formatHumanReadable(d.y));
      });

      hoverInfo.innerHTML = infotext.join('<br/>');
  })
  .on('plotly_unhover', function(data){
      hoverInfo.innerHTML = '';
  });