40

I'm using nvd3's piechart.js component to generate a piechart on my site. The provided .js file includes several var's, as follows:

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

In my in-line js, I've been able to override some of those variables, like this (overriding showLegend and margin):

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(false)
    .showLegend(false)
    .margin({top: 10, right: 0, bottom: 0, left: 0})
    .donut(true);

I've tried overwriting the tooltip in the same way:

.tooltip(function(key, y, e, graph) { return 'Some String' })

but when I do that, my piechart does not display at all. Why can't I overwrite the tooltip here? Is there another way I can do so? I'd really rather not have to edit piechart.js itself at all; I need to keep that file generic for use in multiple widgets.

And while we're at it, is there some way I can make the entire tooltip into a clickable link?

Jaimal Chohan
  • 8,193
  • 6
  • 40
  • 62
kage23
  • 401
  • 1
  • 4
  • 3
  • 4
    I'm not nvd3 expert, just started playing with it. I had the same problem as you, what you're looking for is : .tooltipContent(function(key, y, e, graph) { return 'Some String' }) *And while we're at it, is there some way I can make the entire tooltip into a clickable link?* You can return any HTML for the tooltip, but as it appear/disappears on hover, you'll have a hard time clicking on it. – rotoglup Sep 14 '12 at 08:42

9 Answers9

56

Just override in this way it will work definitely

function tooltipContent(key, y, e, graph) {
            return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
        }

Or

tooltipContent(function(key, y, e, graph) { return 'Some String' })
Alexis Pigeon
  • 7,054
  • 11
  • 36
  • 44
user1847371
  • 589
  • 4
  • 7
  • 1
    +1 for the alternative solution. I have been using `.tooltip(..)` for a lot of NVD3 charts, and just had to use `.tooltipContent(..)` for the lineChart.js – shabeer90 Aug 02 '13 at 11:23
  • can you please tell me, how I can modify this method for NVD3's linechart coz tooltipcontent is not working in that case? – Mitaksh Gupta Jun 30 '14 at 14:07
  • 6
    @MitakshGupta `tooltipContent` is deprecated, use `chart.tooltip.contentGenerator` instead – cheniel Aug 17 '15 at 21:41
39

I have just got the same problem, with nvd3 1.8.1, and this is the solution I've found.

Without the option useInteractiveGuideline you could simply declare your tooltip generating function in chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}):

The argument d is given by nvd3 when calling the tooltip, and it has three properties :

  • value: the x-axis value for the cursor position
  • index: the index in chart's datum corresponding to the the cursor position
  • series: an array containing, for each item in the chart :
    • key: the legend key for that item
    • value: the y-axis value for that item at the cursor position
    • color: the legend color for that item

So here you have an example:

chart.tooltip.contentGenerator(function (d) {
          var html = "<h2>"+d.value+"</h2> <ul>";

          d.series.forEach(function(elem){
            html += "<li><h3 style='color:"+elem.color+"'>"
                    +elem.key+"</h3> : <b>"+elem.value+"</b></li>";
          })
          html += "</ul>"
          return html;
        })

Important note

When the option useInteractiveGuideline is used, the chart.tooltip object isn't used to generate the tooltip, you must instead use the chart.interactiveLayer.tooltip, i.e.:

this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })

I hope the answer is useful for you, even if late.

LostInBrittany
  • 1,102
  • 9
  • 19
15

Customized tooltip can not exist with "useInteractiveGuideline".

user2612936
  • 151
  • 1
  • 2
  • 4
    It's now possible to have custom content with interactive guidelines as of version 1.8.1 (https://github.com/novus/nvd3/tree/v1.8.1-alpha). – Pim Mar 12 '15 at 00:10
8

If you happen to use the Angular NVD3 wrapper, the way to set the custom message is through chart options, simply:

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};
pCyril
  • 134
  • 1
  • 3
5

To add to previous answers, sometimes you want to use the data of the series and not only of x and y. For instance when

data = {'values': [{'month': 1, 'count': 2}, ...], 'key': 'test' }

For those situations, use 

.tooltip(function(key, x, y, e, graph) {
         var d = e.series.values[e.pointIndex];
         return '<h3>' + e.series.key + '</h3><p>' + d.month.toString() + ...;
 });

e.series is the particular series the mouse is hovering, e.pointIndex is the index on the values of the series. Here e.series.key == key, but I used to empathise what is e.series.

Jorge Leitao
  • 15,204
  • 16
  • 73
  • 108
  • Would you take a moment to look at my question here https://stackoverflow.com/questions/64051027/how-to-add-more-attributes-in-tooltip-series-in-angular-nvd3-line-chart What you say is very close to what I want to achieve, and your data structure is exactly what I have, but my function(d) has only one argument - d, and I am unable to reach to the custom attributes in values array via the d argument. – user2217057 Sep 24 '20 at 19:17
4
my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });
Aleck Landgraf
  • 1,485
  • 14
  • 13
  • 1
    Just voted this from -1 to 0. Why was it downvoted? This was helpful. – nickcoxdotme Mar 14 '14 at 15:58
  • 2
    it wasn't me, but I'd guess it's because the answer is incorrect - the question was about piecharts, and tooltip doesn't work for pie, it has to be tooltipContent and there shouldn't be an x parameter – CupawnTae Mar 26 '14 at 13:52
  • 1
    While the question may have been directed at pie charts I was thankful this was added in. My search was more general. – Barrett Clark Dec 05 '14 at 12:15
2

I think you're missing the 'x' parameter in your tooltip function. The format of the function call is:

function(key, x, y, e, graph)
jbizzle
  • 29
  • 2
  • 1
    this is incorrect - there's no x parameter in pie charts; the problem is that it should be .tooltipContent as in user1847371's answer – CupawnTae Mar 26 '14 at 13:53
1
var chart = nv.models.multiBarChart();

chart.tooltip.contentGenerator(function (obj) {
                return JSON.stringify("<b>HOHO</b>")
            })

This worked for me...

Doctor
  • 3,826
  • 2
  • 24
  • 44
-2

chart:{
interactive:true,
tooltips: true,
tooltip: {
  contentGenerator: function (d) {
    return '<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>'
  }
}
Thank You and Best Regards Abhay Patidar
Ab Pati
  • 27
  • 6
  • Please edit your answer, or you could be down-voted. As it is now, it's just a suggestion with no context. Please see here for [How to Write a Good Answer](http://stackoverflow.com/help/how-to-answer) on StackOverflow. – jacefarm Jan 05 '17 at 06:53