Ngx-charts: graph expands the size of an angular-flex parent container

[jmls]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting

Current behavior
a chart that has no [view] set expands it's parent container when using angular-flex

Expected behavior
a chart should not change the size of the parent container, just fit inside it

Reproduction of the problem
without the charts, the div card size size is "1654x872"

<div fxFlex #card>
            <!-- <ngx-charts-bar-vertical  ....  </ngx-charts-bar-vertical> -->
 </div>

If I add the charts back in, it gives a #card size of "1750x1024"

<div fxFlex #card>
            <ngx-charts-bar-vertical   ....  </ngx-charts-bar-vertical>
 </div>

What is the motivation / use case for changing the behavior?
I have to employ a horrible hack to make the chart fit within the container

Please tell us about your environment:
linux,

• ngx-charts version:
  5.3.1

• Angular version:
  4.2

• Browser:
  Chrome Version 57.0.2987.98 (64-bit)

• Language: [all]

[zbagley]

Possible connection to #225

[marjan-georgiev]

Yes, if you have padding in your parent container, just wrap the chart in another div inside it with 100% width and height.

[mattvaughan]

When using @angular/flex-layout, fxFlex on the flex items doesn't work. Specifying something like fxFlex="33" will keep the charts from messing with anything though you have to manually specify percentages.

[BraneMKD]

I had the same issue and with overflow: hidden on the parent it is ok now.

[philippbruhin]

For me adding either padding:0; or overflow:hidden; to the outer container didn't help. Check following stackblitz for reproducing the issue. Any suggestions for a temporary workaround?

https://stackblitz.com/edit/angular-material-flex-layout-ngx-charts

[Zundrium]

Facing the same issue here, sad but true. Can't use this library because of this :(

[MJomaa]

Same as @Zundrium. Nice library but doesn't work great with flexbox. Just ditched flexbox for every layout where a chart is used and now it works great. I also trigger a window resize event when major layout changes happen.

[marjan-georgiev]

Try wrapping the chart in a position: absolute element. This will prevent the flex container from being affected from the chart. Here's an example:

https://stackblitz.com/edit/angular-material-flex-layout-ngx-charts-a6vhpc?file=app/flexLayoutSample.component.ts