3 files changed, 30 insertions, 9 deletions
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 35c7c8d5..2eea561e 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -6,5 +6,6 @@ canvas{
     background-color: var(--ns-bg-dark-100);
     border-radius: 5px;
     margin: 10px;
-    font-size: 10px !important;
-  }
-\ No newline at end of file
+    font-size: 11 !important;
+  }
+ 
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index 5bb7aae6..d48212cd 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,4 +1,4 @@
-
-    <canvas  id="myChart" >   
+<div #wrapper style="width:100%;height:95%;">
+    <canvas  id="myChart" #canvas>   
     </canvas>
-    
-\ No newline at end of file
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index e873618c..89a76a44 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -19,11 +19,27 @@ export class LineChartComponent implements AfterViewInit {
   dataValLoss:number[]=[];
   dataEpoch: number[] = [];
 
+  @ViewChild('wrapper')
+  wrapper!: ElementRef;
+  @ViewChild('canvas')
+  canvas!: ElementRef;
+
   constructor() {
+    
   }
-
+  width = 700;
+  height = 400;
+  
   myChart!: Chart;
-
+  resize() {
+    this.width = this.wrapper.nativeElement.offsetWidth;
+    this.height = this.wrapper.nativeElement.offsetHeight;
+
+    if (this.canvas) {
+      this.canvas.nativeElement.width = this.width;
+      this.canvas.nativeElement.height = this.height;
+    }
+  }
   update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
     this.dataAcc.length = 0;
     this.dataAcc.push(...myAcc);
@@ -56,6 +72,9 @@ export class LineChartComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    
+    window.addEventListener('resize', () => { this.resize() });
+    this.resize();
     this.myChart = new Chart("myChart",
       {
         type: 'line',
@@ -69,7 +88,7 @@ export class LineChartComponent implements AfterViewInit {
             
           },
           {
-            label: 'VAl_Accuracy',
+            label: 'Val_Accuracy',
             data: this.dataMSE,
             borderWidth: 1
           },
@@ -150,3 +169,4 @@ export class LineChartComponent implements AfterViewInit {
     );
   }
 }
+