diff --git a/src/app/charts/device-chart/device-chart.component.html b/src/app/charts/device-chart/device-chart.component.html
index 077cf3e01..dea3ad5f2 100644
--- a/src/app/charts/device-chart/device-chart.component.html
+++ b/src/app/charts/device-chart/device-chart.component.html
@@ -4,7 +4,7 @@
         <div fxLayout="row" fxLayoutAlign="space-between start">
             <app-donut-chart [elementID]="chartID"></app-donut-chart>
             <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
-                <app-chart-item *ngFor="let state of states | keyvalue" [state]="state.key" [count]="state.value">
+                <app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
                 </app-chart-item>
             </div>
         </div>
diff --git a/src/app/charts/device-chart/device-chart.component.ts b/src/app/charts/device-chart/device-chart.component.ts
index 2bd4644a6..fb6720dae 100644
--- a/src/app/charts/device-chart/device-chart.component.ts
+++ b/src/app/charts/device-chart/device-chart.component.ts
@@ -13,11 +13,9 @@ export class DeviceChartComponent implements OnInit {
   @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
   chartID: string = 'devicesChart';
   elevation: string = cardElevation;
-  states: Map<string, number>;
+  states: { label: string, count: number }[] = [];
 
-  constructor(private folderService: FolderService) {
-    this.states = new Map();
-  }
+  constructor(private folderService: FolderService) { }
 
   ngOnInit(): void {
 
@@ -27,19 +25,24 @@ export class DeviceChartComponent implements OnInit {
     // TODO switch to deviceService
     this.folderService.getAll().subscribe(
       folder => {
-        // TODO: Clear existing data
-        this.donutChart.data([10]);
-
         // Get StateType and convert to string 
         const stateType: Folder.StateType = Folder.getStateType(folder);
         const state: string = Folder.stateTypeToString(stateType);
 
-        // Instantiate empty count states
-        if (!this.states.has(state)) {
-          this.states.set(state, 0);
+        // Check if state exists
+        let found: boolean = false;
+        this.states.forEach(s => {
+          if (s.label === state) {
+            s.count = s.count + 1;
+            found = true;
+          }
+        });
+
+        if (!found) {
+          this.states.push({ label: state, count: 1 });
         }
-        const count: number = this.states.get(state) + 1;
-        this.states.set(state, count);
+
+        this.donutChart.updateData(this.states);
       }
     );
   }
diff --git a/src/app/charts/folder-chart/folder-chart.component.ts b/src/app/charts/folder-chart/folder-chart.component.ts
index 039fd5170..9f8931167 100644
--- a/src/app/charts/folder-chart/folder-chart.component.ts
+++ b/src/app/charts/folder-chart/folder-chart.component.ts
@@ -12,12 +12,10 @@ import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 export class FolderChartComponent implements OnInit {
   @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
   chartID: string = 'foldersChart';
-  states: { label: string, count: number }[];
+  states: { label: string, count: number }[] = [];
   elevation: string = cardElevation;
 
-  constructor(private folderService: FolderService) {
-    this.states = [];
-  }
+  constructor(private folderService: FolderService) { }
 
   ngOnInit(): void {
     for (let state in Folder.StateType) {