Chart.js: Tooltips overlap

[istvanskeri]

http://imgur.com/S1bQhhN

I have a lot of datapoints and my tooltips overlap.

[wbercx]

That's quite a few points indeed. Does it make a difference at all if you change the hit detection radius in the chart options?

`pointHitDetectionRadius : 1`

I imagine it's always going to be extremely sensitive though.

[petsuter]

I have the same problem (with ~200 points) . Setting pointHitDetectionRadius to 1 helps, but doesn't solve the issue entirely.

[fulldecent]

I can't even get the data to show:

http://jsbin.com/yozobahucero/4/edit?html,js,output

[petsuter]

I created http://jsbin.com/biqut/1/edit to illustrate issue #614 but it also has this issue here, and shows how adding pointHitDetectionRadius : 1 only helps marginally.

[KetchupOnMyKetchup]

I looked at google charts and noticed they have only one tooltip displayed at a time and it is on the top right of the chart. Looking at the charts here.. technically even if 4-5 are displaying, there is still only one "on the top of the stack" of the others. In addition to changing the pointHitDetectionRadius, I also moved the tooltip to the top left of the screen so that it is all shown in one place. You can smoothly scroll through a year (or more) of datapoints and have a constant placeholder showing your data and value.

(Note: I also changed the x axis to force it to be horizontal to accommodate more data in a small region.)

The tool tip position is this by default:

tooltipPosition: function () {
            return {
                x: this.x,
                y: this.y
            };
        }

Instead of placing the tool tip near the the x and y coordinate of "this" current data point, I just moved it so that they would all be on the top left. So, if they overlap, it does not matter because you only see the top one and it looks as if it is a smooth transition from each point.

        tooltipPosition: function () {
            return {
                x: 40,
                y: -2
            };
        }

I'm sure if you wanted it on the top right instead you could find the width of the chart and set the variable to that (or if its fixed, no problem there but mine are resizeable).

If you have a wider tooltip underneath a less wide one and it shows through underneath. I commented out the part from the charts.js and added my own hardocded var tooltipWidth. This works if you know your data isn't going over 100 or 1000, however this may not be a good solution for heavy datasets.

    Chart.Tooltip = Chart.Element.extend({
        draw: function () {

            var ctx = this.chart.ctx;

            ctx.font = fontString(this.fontSize, this.fontStyle, this.fontFamily);

            this.xAlign = "center";
            this.yAlign = "above";

            //Distance between the actual element.y position and the start of the tooltip caret
            var caretPadding = 4;

            //var tooltipWidth = ctx.measureText(this.text).width + 2 * this.xPadding,
            var tooltipWidth = 100,
                tooltipRectHeight = this.fontSize + 2 * this.yPadding,
                tooltipHeight = tooltipRectHeight + this.caretHeight + caretPadding;

To negate the bigger tooltip on top of a smaller one, I just changed the opacity to 1 so it doesn't show through at all. You can search for the tooltipFillColor option and change the last value to make it fully filled in (1).

tooltipFillColor: "rgba(0,0,0,1)",

As a side note, you can also get rid of the data points completely to make it easier to use and avoid highlighting 3-4 dots at a time. It will look like this (my mouse here is above the 2nd highest peak) and is smoother for users:

//Boolean - Whether to show a dot for each point
        pointDot: false,

[jcuenod]

I have far fewer tooltips but I'd like them permanently displayed which works well except when they're perfectly in line in which case the problem exists for me too (albeit to a lesser degree).

[gligoran]

I've got the same issue. I did notice, however, that this is only an issue if there's a single dataset.

Here's a jsbin. If you remove the commented second dataset, you'd see only one multi-tooltip. I think if it's solved there, it should be done the same way with the single tooltip.

[fulldecent]

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/pen/
• Premade template: http://codepen.io/pen?template=JXVYzq