Tooltips not showing up when the viewport is at a specific size

[mlorant]

Expected Behavior

Using the following config, I would expect the tooltip to appear whenever I hover the chart:

     Chart.Line(ctx, {
            data: {
                [... some data ...]
            },
            options: {
                legend: false,
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },

                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                ...

Current Behavior

In a very particular situation, when the viewport has the exact size to make the old #2127 appears, the tooltips are not showing up.

Possible Solution / Context

Not really a solution but I'm 99.999 % sure this is related to the issue #2127 + the pull request #6011.
I had the bug explained in the issue referenced above. I've decided to upgrade our ChartJS version to the last one (2.9.3), since the PR 6011 seems to resolve the flickering bug.
The bug was indeed solved but when hovering the graph the tooltips no longer appear. If I change the viewport size (by opening the devtools or resizing my browser window) it works again, without refreshing the page

Here's a summary in a .gif, in the order: the flickering situation with the 2.7.x, the graph with the exact same viewport size with 2.9.3 and a third page where my browser is resized. See the title above the graph for each situation.

Environment

• Chart.js version: 2.7.2 then 2.9.3
• Browser name and version: Firefox 78.0.1
• Link to your project: The page showed above is from a private project, I guess I can reproduce it elsewhere if really needed

[kurkle]

Can you try this with 3.0.0-alpha or create a codepen or equivalent to reproduce?

[benmccann]

I had an infinite resize issue and it turned out I had done two things wrong: I had two charts with the same ID (wasn't obvious to me because one was on another tab and wasn't showing) and I didn't give the chart its own container. Can you make sure the chart is in a div with nothing else? I've sent a PR to update the getting started docs: #7658

[mlorant]

Sorry @kurkle, I saw your message during a long week-end off and forgot to check back after.

I just tried by reproducing the bug with ChartJS 2.7 then upgrading to Chartjs 3.0a2, and indeed the resize bug disappears AND tooltips are shown (by the way, the graph is not exactly the same, the curve is not smoothed, but it might me some graph configuration not related to the issue here).

There's only one graph instantiated on this page, with a single version of ChartJS loaded. The graph is "assigned" to the following HTML empty node: <canvas id="dpae_usage_graph"></canvas>.

[mlorant]

I made a CodePen where the bug can be reproduced using a window with a viewport size of 714x813. I suggest to begin with the version 2.7.2, find the resizing bug and change the <script> url to 2.9.3 without resizinging the window.

(The graph is resizing indefinitely like in my original gif here, you just can't see it on a screenshot, it's more to give hint of the viewport size needed)

[kurkle]

(by the way, the graph is not exactly the same, the curve is not smoothed, but it might me some graph configuration not related to the issue here).

Its the elements.line.tension that defaults to 0 in latest alpha.
You can change that in any of the following ways:

// Set global default
Chart.defaults.elements.line.tension = 0.4;

// Override line default per chart
new Chart(ctx, {
  data: { ... },
  options: {
    elements: {
      line: {
        tension: 0.4
      }
    }
  }
};

// Override per dataset
new Chart(ctx, {
  data: {
    datasets: [{
      lineTension: 0.4,
      ...
    }]
  }
};

[benmccann]

@mlorant thanks for that. I'm not quite sure how to set the viewport to that exact size in Chrome. Can you advise?

Also, I notice you didn't wrap the chart in its own div. Can you try that and see if it helps? I'd suggest reading through the docs on this page to see if anything helps: https://www.chartjs.org/docs/latest/general/responsive.html

[mlorant]

@benmccann I'm just playing with my browser size in fact (but it's also "working" with the Responsive design mode of Firefox).

There's no container in the Codepen indeed but on my original page, there's one, so I don't know if that makes a difference...

[kurkle]

I think this can be closed, because its resolved in v3, right?