Currently, I have integrated an ng2 Line Chart into a custom container to resemble a mat-card. However, when the navigation panel is hidden and the entire page is displayed, the container resizes but the charts do not. They only resize if placed on their own row, but for better UI presentation, I want them to remain side by side.
Original Setup:
Desired Outcome:
Below is the code snippet for the charts:
<div class="flex-item">
<div style="display: block;">
<canvas
baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="false"
[colors]="lineChartColors"
[chartType]="lineChartType"
></canvas>
</div>
</div>
</div>
This is the CSS styling for the container:
.falseCard {
background-color: white;
padding: 1em;
width: 100%;
display: flex;
border-radius: 4px;
}
Here is the HTML structure of the page where the charts are located:
<div fxLayout="row" fxLayoutGap="16px">
<div class="falseCard mat-elevation-z2"><ls-new-users-chart-widget></ls-new-users-chart-widget></div>
<div class="falseCard mat-elevation-z2"><ls-active-users-chart-widget></ls-active-users-chart-widget></div>
</div>