diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
index 9c0f2ee..607fd27 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
@@ -8,4 +8,11 @@
     <option *ngFor="let parameter of parameters" [value]="parameter">{{ parameter }}</option>
   </select>  
 </div>
-<canvas id="myChart"></canvas>
+
+<div *ngIf="isLoading" class="loading">
+  Loading...
+</div>
+
+<canvas #myChart id="myChart"></canvas>
+
+
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
index 25a147a..7783e2b 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
@@ -11,7 +11,7 @@
     margin: 20px;
     align-items: center;
   }
-  
+
   .form-select{
     width: max-content;
     margin-top: 20px;
@@ -24,6 +24,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
+    height: max-content;
   }
   
   
@@ -37,8 +38,17 @@
   
   @media (max-width: 576px) {
     canvas{
-        flex: 1 1 100%;
+      display: flex;
+      width: max-content;
+      flex: 1 1 100%;
     }
   }
+
+  .loading{
+    font-size: 18px;
+    text-align: center;
+    color: #888;
+}
+
   
   
\ No newline at end of file
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
index 9f541ee..6b8f35b 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler } from 'chart.js';
-
 @Component({
   selector: 'app-graph',
   standalone: true,
@@ -10,8 +9,10 @@ import { Chart, LineController, LineElement, PointElement, LinearScale, Title, C
   styleUrls: ['./graph.component.scss']
 })
 export class GraphComponent implements OnInit {
+  @ViewChild('myChart', { static: false }) chartElement!: ElementRef<HTMLCanvasElement>;
   selectedSensor: string | null = null;
-  parameters: string[] = []; 
+  parameters: string[] = [];
+  isLoading: boolean = true; 
 
   sensorParameters: { [key: string]: string[] } = {
     dht: ['Temperature', 'Humidity', 'Light'],
@@ -46,6 +47,7 @@ export class GraphComponent implements OnInit {
   };
 
   chart: any;
+  isChartLoaded = false;
   labelHourly = [
     '01.00', '02.00', '03.00', '04.00', '05.00', '06.00', '07.00', '08.00',
     '09.00', '10.00', '11.00', '12.00', '13.00', '14.00', '15.00', '16.00',
@@ -56,19 +58,24 @@ export class GraphComponent implements OnInit {
     Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler);
     this.selectedSensor = 'dht';
     this.parameters = this.sensorParameters[this.selectedSensor];
-    this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
-
-    window.addEventListener('resize', () => {
-      if (this.chart) {
-        this.chart.destroy();
-        this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
-      }
-    });
     
   }
+  ngAfterViewInit(): void {
+    this.isLoading = true;
+    setTimeout(() => {
+      this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
+      this.isLoading = false;
+    }, 2000);
+
+
+    console.log(this.chartElement.nativeElement);
+    console.log(this.chart);
+    console.log(this.isLoading);
+  }
+  
 
   createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
-    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+    const canvas = this.chartElement.nativeElement;
     const ctx = canvas.getContext('2d');
   
     if (this.chart) {
@@ -169,53 +176,57 @@ export class GraphComponent implements OnInit {
   
 
   updateChart(): void {
-    const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase();
+    this.isLoading= true; 
+    setTimeout(() => {
+      const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase();
   
-    let newData: number[] | undefined;
-    let newLabel: string = '';
-    let newColor: string = '';
-  
-    const humidity = '#16423C';
-    const temperature = '#8F5A62';
-    const light = '#DF9B55';
-    const moisture = '#54909c';
-    const conductivity = '#661311';
-    const ph = '#664735';
-    const nitrogen = '#3a6635';
-    const phosphorus = '#3f3566';
-    const potassium = '#5f3566';
-  
-    switch (this.selectedSensor) {
-      case 'dht':
-        newData = this.dhtData[parameter as keyof typeof this.dhtData];
-        newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
-        newColor = (parameter === 'humidity') ? humidity :
-                   (parameter === 'temperature') ? temperature : light;
-        break;
-      case 'npk1':
-        newData = this.npk1Data[parameter as keyof typeof this.npk1Data];
-        newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
-        newColor = (parameter === 'temperature') ? temperature :
-                   (parameter === 'moisture') ? moisture :
-                   (parameter === 'conductivity') ? conductivity :
-                   (parameter === 'ph') ? ph :
-                   (parameter === 'nitrogen') ? nitrogen :
-                   (parameter === 'phosphorus') ? phosphorus : potassium;
-        break;
-      case 'npk2':
-        newData = this.npk2Data[parameter as keyof typeof this.npk2Data];
-        newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
-        newColor = (parameter === 'temperature') ? temperature :
-                   (parameter === 'moisture') ? moisture :
-                   (parameter === 'conductivity') ? conductivity :
-                   (parameter === 'ph') ? ph :
-                   (parameter === 'nitrogen') ? nitrogen :
-                   (parameter === 'phosphorus') ? phosphorus : potassium;
-        break;
-      default:
-        console.error('Sensor tidak ditemukan');
-        return;
-    }
-    this.createChart(newData!, newLabel, newColor, this.labelHourly);
+      let newData: number[] | undefined;
+      let newLabel: string = '';
+      let newColor: string = '';
+    
+      const humidity = '#16423C';
+      const temperature = '#8F5A62';
+      const light = '#DF9B55';
+      const moisture = '#54909c';
+      const conductivity = '#661311';
+      const ph = '#664735';
+      const nitrogen = '#3a6635';
+      const phosphorus = '#3f3566';
+      const potassium = '#5f3566';
+    
+      switch (this.selectedSensor) {
+        case 'dht':
+          newData = this.dhtData[parameter as keyof typeof this.dhtData];
+          newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
+          newColor = (parameter === 'humidity') ? humidity :
+                     (parameter === 'temperature') ? temperature : light;
+          break;
+        case 'npk1':
+          newData = this.npk1Data[parameter as keyof typeof this.npk1Data];
+          newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
+          newColor = (parameter === 'temperature') ? temperature :
+                     (parameter === 'moisture') ? moisture :
+                     (parameter === 'conductivity') ? conductivity :
+                     (parameter === 'ph') ? ph :
+                     (parameter === 'nitrogen') ? nitrogen :
+                     (parameter === 'phosphorus') ? phosphorus : potassium;
+          break;
+        case 'npk2':
+          newData = this.npk2Data[parameter as keyof typeof this.npk2Data];
+          newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
+          newColor = (parameter === 'temperature') ? temperature :
+                     (parameter === 'moisture') ? moisture :
+                     (parameter === 'conductivity') ? conductivity :
+                     (parameter === 'ph') ? ph :
+                     (parameter === 'nitrogen') ? nitrogen :
+                     (parameter === 'phosphorus') ? phosphorus : potassium;
+          break;
+        default:
+          console.error('Sensor tidak ditemukan');
+          return;
+      }
+      this.createChart(newData, newLabel, newColor, this.labelHourly);
+      this.isLoading=false;
+    }, 2000);
   }
 }