How to add more attributes in tooltip series in Angular NVD3 line chart

Question

I need to add more attributes in tooltip series in Angular NVD3 line chart, if possible, without modifying the NVD3 source code. I know there are similar posts, but none of them covers this scenario.

Here is my tooltip section in options:

interactiveLayer: {
  tooltip: {
    contentGenerator: function (d) {
        
        // output is key, value, color, which is the default for tooltips 
        console.log(JSON.stringify(d.series[0]));
        //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"}

        // and I need more attributes to be added
        // into data points, such as label, count, location (see data below)
        //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1), "label" : "some label", "count" : 23, "location" : "Paris"}
    }
  }
}

And here is my data:

$scope.data =
[
{
  values: FirstGraphPointsArray, 
  key: 'Name',
  color: 'rgba(255,140,0, 1)'
},
{
   values: SecondGraphPointsArray
   key: 'City',
   color: 'rgba(255,140,0, 1)'
}
]

Finally, the structure of the arrays in data:

FirstGraphPointsArray -> [{ x: xVariable, y: yVariable, label: labelVariable, count: countVariable, location : locationVariable }, {second element...}, {third element...}];
SecondGraphPointsArray -> [a similar array...]

How to get more attributes (label, count, location) from these arrays into the contentGenerator: function (d). As mentioned above, I only receive the default ones from within function parameter (d)

    console.log(JSON.stringify(d.series[0]));
    //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"}

Eakin

You could use this contentGenerator function with your own code to generate a custom tooltip in order to change the HTML structure within tooltip. You can "clone" the original HTML, and just inlcude the new <tr> and <td> in tooltip's table for your additional parameters. Seems to be the only way to change the default number of parameters/values included in tooltip. Have you tried this approach? – Berthoud

Thanks for your comments. Below I share the answer I came up with. – Eakin

You're welcome! Glad to know you've found a solution. – Berthoud

Answer 1

I came up with a solution and wanted to share it, in case someone else comes across the same task. I ended up accessing some of the parameters from d through the default route - function(d), while some of the custom ones - directly from $scope.data.

Important: using the d.index, which indicates the place of the data point in the list is critical hear. This makes sure that for any given index the parameters pulled from the function(d) and those of pulled directly, belong to the same data point (see the code below).

interactiveLayer: {
  tooltip: {
    contentGenerator: function (d) {
      var customTooltipcontent = "<h6 style='font-weight:bold'>" + d.value + "</h6>";

    customTooltipcontent += "<table class='custom-tooltip-table'>";
    customTooltipcontent += "<tr style='border-bottom: 1px solid green;'><td></td><td>Name</td><td>Value</td><td>Count</td></tr>";
    for (var i = 0; i < d.series.length; i++) {
      customTooltipcontent += "<tr><td><div style='width:10px; height:10px; background:" + d.series[i].color + "'></div></td><td>" + d.series[i].key + "</td><td>" + d.series[i].value + "</td><td>" + $scope.data[0].values[d.index].count + "</td><td>" + $scope.data[0].values[d.index].location + "</td></tr>"
    }
    customTooltipcontent += "</table>";

    return (customTooltipcontent);
    }
   }
 }

Eakin