Chart.js: Tooltips showing outside of minimum time bounds

[ekerstein]

Codepen example: https://codepen.io/ekerstein/pen/XZdJwJ

When the "min" time setting is used, it adjusts the line chart accordingly, however the tooltips still show up when you hover to the left outside of bounds. This is more noticeable on a chart with many datapoints. For example:

Expected behavior is that the "min" time setting would clip/truncate all values outside of the bounds. In other words, it would be as if those values don't exist. No tooltips should appear for those values.

Current behavior appears to be that the line is still drawn but does not appear outside of bounds, however the tooltips still do.

This is all assuming of course that there aren't additional settings that I'm unaware of to fix this issue.

EDIT:
One way around this is to simply not feed the full array into the dataset. For example instead of using data: data_array use data: data_array.slice(-100) to make a subset of the last 100 items in the array.

[ekerstein]

I made an imperfect solution by adjusting the tooltip positioning. I had it check the height of the xscale and anything smaller than that (to the left of the scale) is hidden.

https://codepen.io/ekerstein/pen/qxRJbg

This is imperfect because the ideal solution would still show the minimum value/element when hovering over the x scale. My solution simply hides all tooltips. So a solution that adjusts what elements are fed into the tooltips may be better.

[MPierre9]

Mind if I try to fix this?

[etimberg]

@MPierre9 how are you thinking of fixing this?

[MPierre9]

@etimberg It seems to be a problem with extra data being fed into the graph. When I adjust the graph for a smaller amount of days for example 20 I get more than 20 as the minimum (1 or 2 extra). Right now I'm trying to find where the data is being fed into the graph so I can try to maybe truncate whatever is outside of the minimum value. I've tampered with a small fix that resets the tooltip when it exits the boundaries of x but I think its a better idea to try to correct the data.

[etimberg]

hmmm, what about just having the tooltip ignore the event if it's outside of the main chart area? One concern with filtering the data outside the chart is that lines drawn to the first point outside the chart need to remain connected

[MPierre9]

What do you think of think of this? If x is outside minimum border of the graph then no tool tip items are created

var border = active[0]._xScale.left + 7; // 7 used for graph offset
if(existingModel.x > border) {
    for (i = 0, len = active.length; i < len; ++i) {            
        tooltipItems.push(createTooltipItem(active[i]));
   }                
}

Result

[etimberg]

I like it. I think it would be easier to use the chart.chartArea bounds though rather than calculating the border yourself

[MPierre9]

Thanks! And ok is there a way of accessing chartArea inside of update: function(changed)? I'm getting undefined when I try to access it.

[etimberg]

You should be able to use https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L269

[mymro]

I would be really interested in a fix for this problem that has existed for quite some time now. What would it need to finally merge a solution?

[kurkle]

Fixed in 3.0.0-alpha: https://codepen.io/kurkle/pen/vYOqjOB

[mymro]

Thank you. Can't wait for the release