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;
            }
        }
    }
}

Being able to turn on/off different series on a graph by clicking on them in the legend is a pretty neat feature of NVD3 but sometimes we don’t want the user to be able to do it.

Hidden away in the documentation is the little toggle to help us do this, a property on the legend object called “updateState”.
All we need to do is set legend.updateState = false and clicking on the legend will no longer do anything.

Or in Angular-nvd3 we add it to our chart options like this:

$scope.chartOptions = {
    chart: {
        legend: {   
            updateState: false
        },
    },
    ... other properties ...
}