Kunal Ojha Kunal Ojha - 5 months ago 92
AngularJS Question

How can I style a tooltip for an NVD3 Chart?

Referencing the NVD3 framework. I'm trying to add a customized tooltip for the following pie chart listed below:

http://plnkr.co/edit/QYuol3Q10xsA3pziiWGl?p=preview

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
color:['#CE1B1F', '#FFC455', '#00A6CD'],
showLabels: false,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};

$scope.data = [
{
key: "CAT I",
y: 2
},
{
key: "CAT II",
y: 1
},
{
key: "CAT III",
y: 3
},
];
});


Since I'm just working with the example from Krispo's github I'm not sure how I can customize a tooltip so that it resembles the following:

enter image description here

hsh hsh
Answer

In order to add custom tool-tip, you need to add tooltip to existing nvd3 options like this:

tooltip: {
     contentGenerator: function (e) {
           //Create and return desired tool-tip as html using e.series and e.data
     }
}

If you need to use some additional values or attributes for each of your series you can define them like this in $scope.data:

$scope.data = [
        {
            key: "CAT I",
            y: 2,
            MyAttribute1:"DLA Avn ... CAT I",
            MyAttribute2:"DLA Energy ... CAT I"
        },
        {
            key: "CAT II",
            y: 3,
            MyAttribute1:"DLA Avn ... CAT II",
            MyAttribute2:"DLA Energy ... CAT II"
        },
        {
            key: "CAT III",
            y: 1,
            MyAttribute1:"DLA Avn ... CAT III",
            MyAttribute2:"DLA Energy ... CAT III"
        },
    ];

now you can access custom values inside tool-tip function using e.data like this:

tooltip: {
         contentGenerator: function (e) {
              var series = e.series[0];
              if (series.value === null) return;

              var rows = 
                "<tr>" +
                  "<td class='key'>" + series.key + '- #3: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" + 
                "</tr>" +
                "<tr>" +
                  "<td class='key'>" + series.key + '- #5: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute2 + "</td>" + 
                "</tr>";

              var header = 
                "<thead>" + 
                  "<tr>" +
                    "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                    "<td class='key'><strong>" + series.key + "</strong></td>" +
                  "</tr>" + 
                "</thead>";

              return "<table>" +
                  header +
                  "<tbody>" + 
                    rows + 
                  "</tbody>" +
                "</table>";
            } 
}

There is an Edited Plunker to show you how this can be done.

hope that helps.

Comments