Angular Material Card doesn't wrap the chart

[KlausHans]

Describe the bug I want to put the chart, e.g. a gauge-chart, in a Angular Material Card. I provide the size via the view-property to the gauge. Now i would expect that the card contains the whole chart. This is not the case.

To Reproduce

• Put a gauge chart in a Material Card
• provide the size of the gauge via the view property

Expected behavior It should look like this:

Screenshots See above

Demo https://stackblitz.com/edit/angular-material-u3mauf?file=app%2Fapp.component.html

ngx-charts version 11.1.0

Additional Information I am not 100% sure if this is really a bug in this libray. But i am quite sure, because normally the Material Card would fit to its content. If i replace the gauge with text it looks normal. I think the problem ist, that only the svg has a size, but not the parent elements. So the card thinks its content has a height of 0.

[KingDarBoja]

Yeah, you are right, to fix this, you should wrap the chart around a parent container and set its scss (or css) styles like this:

HTML

<div class="chart-container">
    <div class="spectre-pie-chart">
        <ngx-charts-pie-chart [scheme]="config.colors" [results]="config.data">
        </ngx-charts-pie-chart>
    </div>
</div>

SCSS

:host {
    height: 100%;
    width: 100%;
}

.spectre-pie-chart {
    height: 100%;
    width: 100%;
    float: right;
}

Then you can put the chart component inside the material card content.

Hope its works! Cheers!

[CAspeling]

When you have a component that resizes according to its children and a child that resizes to its parent, you have problems. Can I please make a suggestion that these charts have a toggle to either be able to have it take up all space provided or us able to define its size so that the wrapper can resize accordingly.

This has messed our dynamic dashboard with various sizing options up numerous times and every time it's a couple of days of fiddling around with sizing. Pretty close to replacing this whole library.

We use fxFlex to allow it to take up 100% of provided space unless it gets expanded to full view when we need to show controls and options above, in which case we need it to flex to all space minus some space at the top. It's all % based so that it looks good on massive 4k screens as well as mobiles for our roaming clients.

[qortex]

+1 on the pain that it doesn't work easily with fxFlex & co. Always a gamble when working out a layout 🤞

[Crocsx]

I have similar problem in bootstrap. Might be setup incorrectly, but when it's inside a card, it will grow in size.

https://stackblitz.com/edit/swimlane-stacked-horizontal-bar-chart-ax7bpg