New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips overlap #526

Closed
istvanskeri opened this Issue Aug 6, 2014 · 8 comments

Comments

8 participants
@istvanskeri
Copy link

istvanskeri commented Aug 6, 2014

http://imgur.com/S1bQhhN

I have a lot of datapoints and my tooltips overlap.

@wbercx

This comment has been minimized.

Copy link

wbercx commented Aug 7, 2014

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

This comment has been minimized.

Copy link

petsuter commented Sep 19, 2014

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

@fulldecent

This comment has been minimized.

Copy link
Collaborator

fulldecent commented Sep 25, 2014

I can't even get the data to show:

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

@petsuter

This comment has been minimized.

Copy link

petsuter commented Sep 26, 2014

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.

@catenn

This comment has been minimized.

Copy link

catenn commented Dec 3, 2014

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.

image
(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:
image

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

This comment has been minimized.

Copy link

jcuenod commented Mar 27, 2015

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

This comment has been minimized.

Copy link

gligoran commented Dec 28, 2015

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

This comment has been minimized.

Copy link
Collaborator

fulldecent commented Jun 27, 2016

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment