This applies to the Angular-nvD3 charting directive for Angular JS.
To create custom tooltips rather than NVD3’s built-in “interactiveGuideline” we can do something like the following to create some HTML of our own to display within the tooltip. In this case I am pulling out the timestamp and value of the point from my dataseries (d.point is the current point being hovered over) and also the series name of the current series (d.series[0].key)…
$scope.options = { chart: { useInteractiveGuideline: false, tooltip: { contentGenerator: function(d) { var str = ''; //console.log(d); str += ('<div style="font-weight:bold; margin:auto; text-align:center;">' +d3.time.format('%Y-%m-%d %H:%M')(new Date(d.point.x)) + '</div>'); str += ('' + d.series[0].key + ': '); str += ('' + d.point.y +''); return str; } } } }