Custom Tooltips - X coordinate unpredictable for points in second half of dataset

[elzii]

JSBin here:

http://jsbin.com/beguzuveki/1/edit?js,output

To demonstrate, hover over the point in for JUNE, then JULY

It looks like a product of the default tooltip styling where the caret is situated to the left/right, but I'm unsure how to resolve for this custom implementation

[elzii]

@etimberg This is actually for version 2.x, experiencing it in 2.0.2 specifically.

[elzii]

I'm able to circumvent the issue by commenting out

this.determineAlignment(tooltipSize)

on line 11604 in Chart.bundle.js though I suspect a more elegant solution is possible.

I'm also setting

Chart.defaults.global.tooltips.yAlign = 'left';
Chart.defaults.global.tooltips.xAlign = 'center';

[etimberg]

I think it's the alignment settings but I'll give it some debugging

[elzii]

Running into further issues even with that line commented out. Here is a screenshot to demonstrate.

Using a simple 1px red vertical line to debug. How can I reliably get the x coord that is at the center of the point? The x value seems to vary - I'm not sure why, perhaps based on the actual value of the point.

It makes achieving the following style quite difficult:

Is it possible for them to be evenly spaced?

[delcon]

I think the Label Version 2.x should be kept for this bug.
This bug originated in V1 and continues to be unsolved.
@elzii did you find a workaround for this?

[seven-plus]

I am also experiencing this issue in v2.3.0.

Has anyone found a workaround/fix?

@elzii ?

Thanks.

[etimberg]

@elzii you can probably compute the correct point using the alignment options and the given point until a PR can fix this.

I will likely add something to fix this as part of my tooltip work in v2.4 hence why this is targeted to v2.4

[delcon]

my workaround is using a custom hover function and get the correct values from it.
This should get you going:

chartoptions{ hover:{ onHover: function(e){console.log(e)} } }

lookout for _view.x and _view.y

[seven-plus]

Thank you for the responses, it is much appreciated.

Due to time pressure I had to revert to the standard tooltip.

[divinitas-art]

Hi, onHover objects has no x a y coordinates, Is there any other way to do the positioning, I can stick easily with original tooltips but when I change the tooltip using custom: fucntion() - like adding some lines, the position is screwed up... Please some help, this is really annoying, we have such a great feature to do custom tooltips but we have no chance to position them right? I dont believe it, there must be a easy way to do this for sure...

[divinitas-art]

I moved
if (changed && opts.custom) {
opts.custom.call(me, model);
}

in front of
// We need to determine alignment of
var tooltipSize = me.getTooltipSize(model);
me.determineAlignment(tooltipSize); // Smart Tooltip placement to stay on the canvas

in chart.js and everything works just as expected... is there a reason this is not done ? because i tested most of graphs a made with this and it works just great...

[sambruggeman]

@StealthyDamn the position is indeed correct when you move that if statement but in our code the tooltip doesn't dissapear anymore except for when we hover another item that has the tooltip(then that one sticks), are you seeing the same behavior?

I've added a check in the custom tooltip function if the tooltip is aligned left or right.

var position = $(this._chart.canvas)[0].getBoundingClientRect();            
if (tooltip.xAlign) {
  if (tooltip.xAlign == 'right') {
    tooltipEl.css({
      left: (position.width/2+position.left+tooltip.x-34) + 'px' //where 34 is arbitrary value cfr your tooltip's width
    });
  } else {
    tooltipEl.css({
      left: position.left + tooltip.x + 'px'
    });
  }
}

[divinitas-art]

@sambruggeman no, I am using the latest version with that modificatin and tooltips are dssapearing correctly.

[sambruggeman]

@StealthyDamn weird, I've also updated to latest version and still have the issue.. either way my addition above fixes the problem for us without going in the chart.js .. not sure if it's actually working as intended or if this is an actual bug ..

[divinitas-art]

@sambruggeman I dont know, maybe it is happeining only with some options or so, I use pretty big code to generate the graphs, many options changed.

[etimberg]

@sambruggeman's solution is the best way to deal with this until we expose the top left of the tooltip regardless of the alignment. This is currently targeted to v2.4 (next release) and will be fixed soon. We will likely add some new properties to expose the (left, top) which can be used

[divinitas-art]

okay, nice, I will stick with my solution since it works and i have my code around it, but will upgrade as soon as 2.4 will come out. I am always sticking with latest version since the charts.js development is great, every new version is much better and I love that.

[etimberg]

Fixed in #3472 see the new caretX and caretY properties