finer control over NVD3 tooltip

Question

I'm plotting multiple series on a timeline using the stacked area chart. All series have different start and end time. Outside of the series' range, all values are given as zero. The problem is that for any given value of x, the tooltip shows values for all series, which makes it very cluttered and hard to read. Is there a way to hide zero entries?

score 2 · Accepted Answer · answered Dec 02 '15 at 21:43

Finally figured out the solution. Here it is for completeness:

var contentGenerator = chart.interactiveLayer.tooltip._options.contentGenerator;
chart.interactiveLayer.tooltip.contentGenerator(function(o) {
    var content = contentGenerator(o);
    var content = $(content);

    content.find('td.value')
          .filter(function() {
              return ["0", "0.0%"].indexOf($(this).text()) >= 0 
           })
          .parent().remove();

    return content[0].outerHTML;
});

Not too happy about using _options, but if anyone has a better solution, let me know.

score 1 · Answer 2 · answered Dec 02 '15 at 15:33

1

From the text you've written, I assume that you want to control the tooltip content.

To do that, you have a contentGenerator function, through which you can control the tooltip content. More description:

For tooltip: Function that generates the tooltip content html. This replaces the 'tooltipContent' option that was on most charts. Please note that the data passed this function is usually different depending on the chart, so you'll probably need to console.log() the input object. Also, the data passed is always a single object now, so previous functions written for the tooltipContent option will have to be adjusted accordingly.

Source: http://nvd3-community.github.io/nvd3/examples/documentation.html#tooltip

answered Dec 02 '15 at 15:33

user3623332

81
3

I can't figure out this API. Can you give an example of how to provide a custom contentGenerator function? And how to call the default implementation so I can get the default tooltip content which I can then modify? – Dmitry B. Dec 02 '15 at 18:58
Sorry for coming back later. Can you please try this solution : http://stackoverflow.com/a/22755231/3623332 - I did use TooltipContent() and it seems to work nicely – user3623332 Dec 03 '15 at 07:43

finer control over NVD3 tooltip

2 Answers2