fixed chart sizing

src/app/components/splash/splash.component.html

@@ -51,16 +51,20 @@
                         [routerLink]="['app',address.value]"></button>
                 </div>
 
-                <div class="text-right">Uptime: {{uptime$ | async | dateAgo}}</div>
+
             </div>
         </div>
 
         <div class="col-12">
 
-            <div *ngIf="chartData$ | async as chartData">
-                <div class="card">
 
-                    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+            <div *ngIf="chartData$ | async as chartData">
+                <div class="card chart">
+
+                    <div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div>
+
+
+                    <p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
                 </div>
             </div>
 

src/app/components/splash/splash.component.ts

@@ -38,6 +38,7 @@ export class SplashComponent {
     this.chartData$ = this.appService.getInfoChart().pipe(
       map((chartData: any) => {
         return {
+
           labels: chartData.map((d: any) => d.label),
           datasets: [
             {
@@ -66,6 +67,7 @@ export class SplashComponent {
 
 
     this.chartOptions = {
+      maintainAspectRatio: false,
       plugins: {
         legend: {
           labels: {

src/styles.scss

@@ -9,4 +9,10 @@
 
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight) {
     cursor: pointer;
+}
+
+
+p-chart>div {
+    position: relative;
+    min-height: 40vh;
 }