Skip to content Skip to sidebar Skip to footer

Custom A Tooltipcontent Of Tooltips With Datum In Discretebarchart Nvd3.js

How I can custom a tooltipContent of tooltips using data loaded into 'datum' in discreteBarChart nvd3.js?, for example, with the following data Jason, I want to see data3, data4, D

Solution 1:

This is how to do it:

nv.addGraph(function() {  
   var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.Data1 })
      .y(function(d) { return d.Data2 })
      .tooltips(true)
      .tooltipContent(function(key, y, e, graph) {
       var data =graph.series.values[y-1];
       return'<p> Text1: ' +  data.Data3 + '</p>'
             + '<p> Text2: ' +  data.Data4 + '</p>'
             + '<p> Text3: ' +  data.Data5 + '</p>'
       });

   d3.select('#chart svg')
      .datum(JsonData)
      .call(chart);

   nv.utils.windowResize(chart.update);

   return chart;
});

Solution 2:

I came up with something like this, since the graph object has a value attribute:

chart.tooltipContent(function (key, date, e, graph) {
     var value = graph.value;
     return"<p><strong>" + date + "</strong><br>" + value + "</p>";
});

No need for accessing the series-array I guess.

Post a Comment for "Custom A Tooltipcontent Of Tooltips With Datum In Discretebarchart Nvd3.js"