CODEWITHSUNDEEP
d3.jsnvd3.js
dMb
dMb

Reputation: 9337

finer control over NVD3 tooltip

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?

Upvotes: 1

Views: 469

Answers (2)

dMb
dMb

Reputation: 9337

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.

Upvotes: 2

user3623332
user3623332

Reputation: 81

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

Upvotes: 1

Related Questions