如何在Angular nvd3折线图上添加工具提示

Question

I'm using the following charts: https://cmaurer.github.io/angularjs-nvd3-directives/line.with.focus.chart.html

I want to be able to hover on the chart points and see the x/y axis values for that point. I noticed that I can add tooptip to the chart. I tried with the following but nothing shows when I hover on one of the points on the graph.

$scope.toolTipContentFunction = function(){
      return function(key, x, y, e, graph) {
        return  'Super New Tooltip' +
          '<h1>' + key + '</h1>' +
          '<p>' +  y + ' at ' + x + '</p>'
      }
    };

<div ng-init="dashboardType = 'Bing'">
      <nvd3-line-with-focus-chart
        data="data"
        id="dashboardChart"
        height="400"
        height2="50"
        margin="{left:80,top:50,bottom:30,right:50}"
        yAxisTickFormat="yAxisTickFormatFunction()"
        xAxisTickFormat="xAxisTickFormatFunction()"
        x2AxisTickFormat="xAxisTickFormatFunction()"
        tooltips="true"
        tooltipcontent="toolTipContentFunction()">
        <svg></svg>
      </nvd3-line-with-focus-chart>
    </div>

Is that the write function to use in order to do what I want? If yes - am I missing something? I've also tried hitting a break point inside my toolTipContentFunction function by hovering my mouse on the chart, but it's not stopping. Not sure what this tooltip supposed to do.

I'm using Chrome Version 46.0.2490.80 m.

Answer 1

Got it! I should've set the interactive mode to be true.

<nvd3-line-with-focus-chart
        data="data"
        id="dashboardChart"
        height="400"
        height2="50"
        margin="{left:80,top:50,bottom:30,right:50}"
        yAxisTickFormat="yAxisTickFormatFunction()"
        xAxisTickFormat="xAxisTickFormatFunction()"
        x2AxisTickFormat="xAxisTickFormatFunction()"
        tooltips="true"
        interactive="true"
        tooltipcontent="toolTipContentFunction()">
        <svg></svg>
      </nvd3-line-with-focus-chart>