Chart width expands indefinitely in Chrome Version 57.0.2987.110 (64-bit)

[sasham43]

If the chart is inside a table and you are zoomed out (e.g. 90%), the chart width expands indefinitely. Resetting the zoom to 100% will stop the width from expanding.

Plunkr: https://plnkr.co/edit/igfH3dZcBW2bsVeqjR0c?p=preview

[martynasma]

Hi there,

I must say the code in your plunker does not make a whole lot of sense.

takes the whole width of the parent element, unless it has a fixed width.

And

does not have any width - it tries to size itself based on content in it.

Since neither

or

has specific size, you have a zero-width chart, which does not make sense.

I suggest setting a relative width to the table, which will take care of the issue:

<table style="width: 100%;">

https://plnkr.co/edit/cd71hDzI9ul09IDKuYkt?p=preview

[sasham43]

I mean, that code is just the minimum amount I could set up to demonstrate the issue. Also, I still see the issue in your Plunkr, even if I define a fixed width for the table in pixels.

[martynasma]

That's weird.

I'm not seeing the issue. Which browser are you testing with?

[sasham43]

...Chrome Version 57.0.2987.110 (64-bit) (on a Mac).

Also, the issue only seems to happen if your zoom level is somewhere between 100% and 33% (if you zoom out far enough the width will stop expanding).

[martynasma]

I was finally able to reproduce it. Thanks.

That being said, I'm not entirely sure how we can resolve that. It seems that table measurement on zoomed page are a bit off which causes it to produce a chart that is a pixel too wide than the current table width, which in turn causes the table to grow. And so on.

Is this a requirement to have the charts in a table?

[sasham43]

No, I was able to get rid of the table as it was only used for positioning purposes. I submitted this issue just to bring it your attention. Thanks for the prompt follow-up though.

[martynasma]

Gotcha. Thanks!

[MatthewRamsey]

FYI: I used the jumbotron bootstrap class on a div and experienced the same issue:

My chart expanded indefinitely in height. Once I removed the jumbotron class and used normal width/height styles it worked correctly.

[martynasma]

@MatthewRamsey I don't think using Jumbotron as a chart container directly is a good idea. Bootstrap is very liberal with the styling of its elements.

I'd rather suggest putting a separate <div> element for a chart into a .jumbotron wrapper. That should make it OK. At least it was in my tests.

If you are still experiencing the issue, maybe you can produce a demo we can take a look at?

[MatthewRamsey]

@martynasma Thank you for the reply! I didn't need the jumbotron for anything in particular... just happened upon the issue and decided to go a different direction anyway. My comment was to help anyone else that may come across a similar issue.

[martynasma]

Gotcha. Thanks!

[surajkr]

I stumbled upon this bug, while I was investigating an issue reported for the amchart in the application supported by my team. We see a chart in a table to start auto expanding at 75% zoom level, in Chrome. I encountered the issue in Chrome version 64.0.3282.186

Is there a workaround for this issue or potential fixes from amCharts standpoint

[martynasma]

@surajkr Any specific demo you can share that can be used to reliably reproduce the issue?

As a side note, the auto-resize can be disabled using autoResize setting.