Every chart except the pie chart accepts heightFull. Turn it on and height stops being a fixed size and becomes a minimum height value: the chart grows to fill its container whenever that container is taller, and keeps filling it as the container resizes.
Both charts below use the same config — height: 200 — and the same container. The only difference is heightFull. Drag the slider to resize the containers.
Stays 200px tall
Fills the container
Drag below 200px and the two panels converge: there is nothing left to fill, so heightFull falls back to the height minimum. Both charts stay 200px tall and get clipped by the container rather than squashing into it.
The container does not have to carry an explicit height — any definite height works, including one handed down by a flex or grid track. That covers the common case: a tile with a header on top and a chart taking whatever is left.
Last 24 hours
<!-- A dashboard tile: the header takes what it needs, the chart takes the rest. -->
<mat-card class="flex flex-col" style="height: 360px">
<h5>Requests per minute</h5>
<p>Last 24 hours</p>
<div class="flex-1 min-h-0">
<pcac-line-chart [config]="config" />
</div>
</mat-card><!-- The wrapper owns the height; the chart fills it. -->
<div style="height: 360px">
<pcac-bar-vertical-chart [config]="config" />
</div>
const config = {
data: [ ... ],
// Minimum height. Used as-is whenever the container is shorter than this.
height: 200,
// Grow past 'height' to fill the container whenever it is taller.
heightFull: true
} as PcacBarVerticalChartConfig;