nvd3.js tooltip position with multiple charts

Question

I\'m usinging v1.7.1 of nvd3. I have a page in which I render rows of charts with the same configuration but different data. I\'m using interactive tooltip option on the m

Answer 1

I discovered a similar bug in 1.8.6-dev just today and fixed it by adding window.scrollY to top on line 742 by changing this block:

    var positionTooltip = function() {
    nv.dom.read(function() {
        var pos = position(),
            gravityOffset = calcGravityOffset(pos),
            left = pos.left + gravityOffset.left,
            top = pos.top + gravityOffset.top;

To:

    var positionTooltip = function() {
    nv.dom.read(function() {
        var pos = position(),
            gravityOffset = calcGravityOffset(pos),
            left = pos.left + gravityOffset.left,
            top = pos.top + gravityOffset.top+window.scrollY;

In this case, it was not that there's a bug with multiple charts so much as there is a bug with scrolling, which is usually implied when one page has multiple charts.

Answer 2

I fixed my problem by changing the default gravity to 's'. I couldn't figure out how to set it as an option, so I just changed the nvd3 code. I'd love to just change it as an option, but the docs weren't clear on that.

Answer 3

I had a similar problem. The current implementation of the nvd3's native showTooltip method looks as follows:

var showTooltip = function(e, offsetElement) {
  var left = e.pos[0] + ( offsetElement.offsetLeft || 0),
    top = e.pos[1] + ( offsetElement.offsetTop || 0),
    x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
    y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
    content = tooltip(e.series.key, x, y, e, chart);

  nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w', null, offsetElement);
};

The implementation mis-align tooltips in different ways. So I've modified the behavior which fixed the problem for me. You can check out my fork https://github.com/ovvn/nvd3/blob/master/build/nv.d3.js