search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

graph expands the size of an angular-flex parent container #451

Closed jmls closed 5 years ago

jmls commented 7 years ago

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,

zbagley commented 7 years ago

Possible connection to #225

marjan-georgiev commented 7 years ago

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

mattvaughan commented 6 years ago

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 commented 6 years ago

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

philippbruhin commented 6 years ago

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 commented 5 years ago

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

MJomaa commented 5 years ago

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 commented 5 years ago

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

mlequime commented 2 years ago

This is not an issue with ngx-charts, but is caused by flexboxes not shrinking below the size of their content unless min-width is set to 0.

Ensure the parent container in the flex box has this property set and the charts will resize down: https://stackblitz.com/edit/ngxchart-flexbox-issue-gwve16