Chart.js: Charts flash quickly and then disappear when navigating back to a tab with charts

[tannerlinsley]

Quite often now, for unknown reasons, all of the charts on my screen will disappear if I navigate to a different tab and then return to the tab with charts. Hmmmm...

[etimberg]

@tannerlinsley this sounds like it is related to resize

[tannerlinsley]

Yeah that's my guess

[etimberg]

@tannerlinsley are you using the latest v2.0-dev branch?

[tannerlinsley]

Pretty sure. I'll do a fresh install and let you know in a bit
On Wed, Mar 16, 2016 at 6:11 PM Evert Timberg [email protected]
wrote:

@tannerlinsley https://github.com/tannerlinsley are you using the
latest v2.0-dev branch?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/2141#issuecomment-197596883

[alexcurtis]

I also get this when i navigate to a new chrome tab and then back again. Using the latest commit in v2.0-dev branch. Doesn't seem to happen if responsive is false.

[etimberg]

@tannerlinsley @alexcurtis do you have high DPI screens? I've been playing around with this on Chrome 49.0.2623.87 on OSX 10.10.5. I can't seem to make it reproduce, but I don't have a high DPI screen.

[tannerlinsley]

Yes I do. Macbook Pro 15 inch retina
On Sat, Mar 19, 2016 at 8:20 PM Evert Timberg [email protected]
wrote:

@tannerlinsley https://github.com/tannerlinsley @alexcurtis
https://github.com/alexcurtis do you have high DPI screens? I've been
playing around with this on Chrome 49.0.2623.87 on OSX 10.10.5. I can't
seem to make it reproduce, but I don't have a high DPI screen.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/2141#issuecomment-198818926

[alexcurtis]

@etimberg My macbook has high dpi, but its not in use (external screens) -- laptop lid shut. OS X 10.11.3

[etimberg]

hmmmm, is it possible to create a screen cap of it in action? Or maybe a chrome profile?

[sqal]

i am having the same issue :/ Chrome 49.0.2623.87 m (64-bit) Windows 10 x64, using v.2.0.0-beta2

[rmckeel]

I have been hunting the same bug.

Some links:
https://github.com/jtblin/angular-chart.js/issues/29
https://github.com/jtblin/angular-chart.js/issues/346 <-- I've posted more findings / diagnostic info on this problem here.

Would it help to have a jsbin/plnkr of it, or does it happen so regularly it is not worth showing?

[rmckeel]

I made a JSBin, unfortunately I was unable to reproduce the issue I am having in a proprietary app.

@etimberg If it helps, here is a video of the issue. I've included the left-side blue navigation so you can tell when I navigate from the app, to another tab (completely blank) back to this tab (only see blue navigation). I am using angular-chart.js v0.9.0 (latest) and Chart.js v1.0.2 (latest stable). In this video, the data updates on the chart while it is not the active tab.
disappearing-angular-chart-js.mp4.zip

[etimberg]

Thanks @rmckeel

[sqal]

I made some example as well (using latest v2 build) - https://embed.plnkr.co/5O5gleOorAFBBAh0f2Zq/

Steps to reproduce:

1. Switch to another tab and resize browser's window
2. Go back to plunker tab and resize browser's window once again
3. Chart is gone
4. Switch to another tab and go back to plunker - chart is visible

[etimberg]

@sqal thanks! I can reproduce this on my end

[rmckeel]

I just coded up a workaround. I can't share full code, but my solution watches page visibility then triggers a resize event. Referencing the excellent answers: http://stackoverflow.com/a/1060034/3232832 and http://stackoverflow.com/a/18693617/3232832.

[isaacfi]

I found the solution modifying the Chart.js just need to change the resize method, because the calculate may fails setting the width and height as 0.

The original code is:

canvas.width = this.chart.width = newWidth;
canvas.height = this.chart.height = newHeight;

And this has to change to:

if (newWidth > 0)
        canvas.width = this.chart.width = newWidth;
if (newHeight > 0)
        canvas.height = this.chart.height = newHeight;

[etimberg]

@isaacfi are you able to drop that in a pr?

[isaacfi]

pr is a picture?

[sqal]

@isaacfi hmm that may help but new problem I noticed is that resize method is not even triggered during browser resize for non responsive charts (option responsive is set to false)

// edit: didn't you applied this on v1.x anyway?

[isaacfi]

Sorry I use always responsive option as true, but you may force resize as this link

http://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript/18693617#18693617

As @rmckeel said

[etimberg]

Closing since this no longer reproduces. May have been a browser issue.

[sqal]

@etimberg Yes! Looks good on my site. Thanks ;)

[Eldair]

Hello,
Still happening with opera dev. version
@etimberg as you said, most probably browser issue (fixed/updated in chrome, not in opera)

[onyoo]

When used with angular-chart.js in Ionic, the graph resizing seems to be triggered by modals. @etimberg 's suggestion is great for keeping height above 0. But with that fix, when a modal is called the height becomes progressively larger.

My quick fix for now:

if (newWidth > 0) {
  canvas.width = this.chart.width = newWidth;
} else {
  canvas.width = this.chart.width;
}

if (newHeight > 0) {
  canvas.height = this.chart.height = newHeight;
}else{
  canvas.height = this.chart.height;
}

This is not the root of the problem, but will correct it. Somehow canvas.height is getting incremented elsewhere. Will look into this later, but hopefully it will help others.

[etimberg]

@onyoo try setting your canvas CSS display to 'block'

[onyoo]

@etimberg unfortunately display: block; didn't solve the problem. The height being incremented is the problem. Thanks for the suggestion though!

[etimberg]

I know, the problem is that the canvas is 4px higher than it measures when the display value is not block. Hence the suggestion to try it

[FredH76]

I still had the same problem : when coming back from a side menu (on ionic), my graph blinked and disapeared.
I implemented a solution that worked well : I put the graph initialization inside a timeout:
$document.ready(function() {
$timeout(function() {
var ctx = document.getElementById("weightChart");
vm.weightChart = new Chart(ctx, weightConfig);
},
50
);
});
hope this help

[patvicto]

Interesting ! That worth a try ! Thanks!:P

Envoyé de mon smartphone BlackBerry 10.
De: FredH76
Envoyé: vendredi 1 décembre 2017 02:36
À: chartjs/Chart.js
Répondre à: chartjs/Chart.js
Cc: patvicto; Comment
Objet: Re: [chartjs/Chart.js] Charts flash quickly and then disappear when navigating back to a tab with charts (#2141)

I still had the same problem : when coming back from a side menu (on ionic), my graph blinked and disapeared.
I implemented a solution that worked well : I put the graph initialization inside a timeout:
$document.ready(function() {
$timeout(function() {
var ctx = document.getElementById("weightChart");
vm.weightChart = new Chart(ctx, weightConfig);
},
50
);
});
hope this help

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/chartjs/Chart.js/issues/2141#issuecomment-348423310, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATh4ZCLZkKXyYJyel3eX5fPHZBqvY0RUks5s76xpgaJpZM4HyJk_.

[SamMousa]

@etimberg I can still reproduce this issue in the latest 2.7.2 release. Could it be reopened?

[LiamDawe]

I have also now come across this, it's a pretty big bug that only seems to happen in Chrome not Firefox.

Show graph, switch tab, come back and it's gone.

[simonbrunel]

@SamMousa @LiamDawe what browser versions? can you share a live example that reproduces this issue?

[ultinous-elelovics]

With Chrome Version 65.0.3325.146 (Official Build) (64-bit) (Ubuntu 16.04) it is reproducible for example on http://www.chartjs.org/samples/latest/charts/line/basic.html

1. load the mentioned page, chart is visible
2. go to other browser tab
3. go back to the original tab, chart is invisible, its place is empty white
4. move your cursor through the chart, then it appears again

[SamMousa]

Same for 65.0.3325.181 (Official Build) (64-bit) on Ubuntu 17.10.

Hmm, could this be a linux issue?

I just discovered that by disabling Accelerated 2D canvas in chrome://flags

I checked with a colleague on Windows; he doesn't get the issue even with acceleration enabled.

[ultinous-elelovics]

You are right, I disabled "Accelerated 2D canvas" and now I am unable to reproduce the bug.

[gordol]

relevant?

https://bugs.chromium.org/p/chromium/issues/detail?id=591374
https://bugs.chromium.org/p/chromium/issues/detail?id=588434

I guess there was some kind of regression at some point... because this only started happening recently for me anyway... Also on Linux, with Chrome 66.

[SamMousa]

@gordol I just checked and I cannot reproduce this in Chrome 66. Also Chrome 67 from the unstable channel seems to work now.

[gordol]

I do apologize... So sorry...

I have Chrome installed, but also, Chromium.

Chrome is fine, Chromium is the one that's bugged.

Apologies...