Skip to content
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

Responsive charts might freeze the browser when created under a hidden container #3978

Closed
apyx opened this issue Mar 2, 2017 · 4 comments
Closed

Comments

@apyx
Copy link

apyx commented Mar 2, 2017

Attempting to create a responsive chart with a time scale using a canvas contained within a hidden container (eg. a non-active Bootstrap tab) will cause the browser to freeze.

Current Behavior

Attempting to create the chart will effectively freeze the browser.

Expected Behavior

If it's not possible to create a responsive chart due to the container being hidden, the library should at least fail gracefully.

Steps to Reproduce

https://codepen.io/apyx/pen/LWGaqy

  1. Click on "Create Chart", chart will be successfully created (container is visible)
  2. Hide the container by clicking on "Toggle Container Visibility"
  3. Click on "Create Chart" again, browser will freeze (container is hidden)

Possible Solution

The loop that causes the browser to hang seems to be this.
Might possibly be caused by innerWidth being negative (due to the container having 0 width?).
Manually setting a minUnit in the scale's options seems to alleviate the problem but not solve it.

Environment

  • Chart.js version: 2.5.0
  • moment.js version: 2.17.1
  • Browser name and version: Chrome 56.0, also tested on Firefox 51.0
@etimberg
Copy link
Member

etimberg commented Mar 2, 2017

Duplicate of #3921
Not sure why this got introduced, but it likely has to do with how the padding calculations changed.

@roma2341
Copy link

roma2341 commented Jul 7, 2022

I use chart.js for angular and I have the same issue on 3.8.0 version. When i use responsive: true my browser hangs forever after i open any modal from dashboard where i have any responsive chart.

@Alvol
Copy link

Alvol commented May 26, 2023

I've got the same issue with chart.js and angular when responsive set to true or unspecified. For me the solution was to wrap Chart.js constructor with zone.runOutsideAngular

@roma2341
Copy link

@Alvol i did the same to fix my issue, i found this solution in one of chart.js wrappers for angular.

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

No branches or pull requests

5 participants