Chart.js: Too many tooltips

[Cristy94]

I have a line chart of about 400px width containing like 40 data points. So each the horizontal distance between two points is about 4px. When I mouseover one point, instead of seeing the tooltip of just that point I see the tooltip for that point AND the tooltip for neighbour points, seeing a total of ~4 tooltips overlapped.

Is there an option to show at max one tooltip at a time?

[Cristy94]

After looking through the source I managed to fix the issue by passing the following option:

        var options = {
            pointHitDetectionRadius : 3
        };

So, by making the hitRadius smaller close points do not show multiple tooltips at once. (even though they will still show 2 overlapping tooltips if they are close enough).

[bakerstreetsystems]

Thanks for the tip! I just had the same issue and your explanation helped me fix it.

[tomwayson]

It's all relative. I have to support up to 120 data points in a chart that can be as small as 284px (iphone5 w/ some padding, etc). Even w/ pointHitDetectionRadius all the way down to 0, I get many tooltips showing at the same time:

So whether or not Chart.js will work for you depends on your data and chart size requirements.

[tannerlinsley]

Does your chart require that level of granularity? Or could you get away with a smaller scale eg. Less points. I'm curios of the point detection radius myself. Gonna take a look....

[etimberg]

@tannerlinsley The base Point class in Chart.core.js takes into account both the x and the y coordinate in it's inRange method. However, the line chart overrides inRange and only uses the x coordinate. Any idea why that may be the case? It sounds like we could filter all of the matching points and do something smarter.

@tomwayson can you try removing these lines from your Chart.js source file and see if that helps your example.

https://github.com/nnnick/Chart.js/blob/master/Chart.js#L2578-L2580

[tomwayson]

@etimberg - commenting out those lines definitely helped - there are still multiple tool tips when the points are close together (sort of like @Cristy94 says above), but it's not nearly as noticeable.

@tannerlinsley - I agree that reducing the point density by filtering some of the data points for smaller size charts would be a good solution , but this application is replacing a Flex app which has charts that are able to draw that many points and show fluid tooltips, so the client's expectation is that this app will be able to meet those same requirements.

Thanks for your suggestions. I have been looking at c3, but this workaround may be a viable solution!

[tannerlinsley]

Yeah. Completely understandable. Well hopefully we can come up with a good way to increase the accuracy

[alanszp]

Quick fix in https://github.com/alanszp/Chart.js

@etimberg @tannerlinsley Want a PR?

[tomwayson]

@alanszp

I would strongly encourage you to make the PR. I tried this with my test data, and it worked much better than @etimberg's suggestion to comment out the lines that override the inRange method.
Don't get me wrong, I appreciated that suggestion, but I would say that it's fairly common for line charts (at least timeline charts) to only listen for changes in x on mouseover. So it felt a little awkward to have to mouse _exactly_ over the line to see the tooltip, Even then, the bigger issue is that you would still see multiple tooltips some times. Your solution was the first that I've seen that completely eliminated the multiple tooltips. So I think you're on the right track to be filtering the points instead of only registering the hover event if the user is exactly over the line.

Did you try this on a chart that has multiple datasets? I did not, but I wonder if your code will cause it to only the tooltip for one dataset? I'm guessing why the library allows multiple tooltips in the first place?

Anyway, I hope you PR this, b/c I think we're going to try using a custom Chart.js based on this along with the ability to turn of x axis labels in #865 instead of using c3, which out of the box was able meet all our requirements except one: export to PNG. I've got a prototype for that, but it has a lot of dependencies and doesn't work in IE.

Thanks for all the help everyone!

[karldiab]

Just had the same issue, thanks for answering after you figured it out!

[ChrisEelmaa]

Had same issue, got inspiration from @alanszp, although it didn't handle multiple datasets as I'd like to, (and had bug with single dataset as well)

I just hacked getPointsAtEvent to return single point that is closest to the mouse cursor (pythagoreas), and return that one:

getPointsAtEvent: function (e) {

    var shortestDistance = null;
    var shortestPoint = null;

    var eventPosition = helpers.getRelativePosition(e);

    helpers.each(this.datasets, function (dataset) {
        helpers.each(dataset.points, function (point) {

            var x1 = point.x;
            var y1 = point.y;
            var x2 = eventPosition.x;
            var y2 = eventPosition.y;

            if (point.inRange(eventPosition.x, eventPosition.y)) {
                var distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
                if (!shortestDistance || distance < shortestDistance) {
                    shortestDistance = distance;
                    shortestPoint = point;
                }
            }
        });
    }, this);

    return [shortestPoint];
},