diff --git a/src/app/_directives/role.directive.ts b/src/app/_directives/role.directive.ts
index 0bd13234..1b950c2c 100644
--- a/src/app/_directives/role.directive.ts
+++ b/src/app/_directives/role.directive.ts
@@ -13,7 +13,12 @@ export class RoleDirective {
     private viewContainer: ViewContainerRef) { }
 
   @Input() set userRole(inputRole: UserRole) {
-    const { role } = JSON.parse(localStorage.getItem("currentUser"));
+    const user = localStorage.getItem("currentUser")
+    if (!user) {
+      this.viewContainer.clear()
+      return
+    }
+    const { role } = JSON.parse(user);
     const minRole = roleMap.get(inputRole);
     const currentRole = roleMap.get(role);
 
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.html b/src/app/item-detail/analyze-charts/analyze-charts.component.html
index 11c1cf0b..eb6ccdd6 100644
--- a/src/app/item-detail/analyze-charts/analyze-charts.component.html
+++ b/src/app/item-detail/analyze-charts/analyze-charts.component.html
@@ -4,8 +4,8 @@ <h6 class="card-header bg-transparent">
     <span class="float-end">
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
         aria-label="">
-        <app-reload-custom-chart *ngIf=isTemporaryChart (chartUpdate)="loadSavedCustomChart($event)"></app-reload-custom-chart>
-        <app-add-metric *ngIf=!isTemporaryChart [chartLines]="chartLines" [preloadedSeries]="preloadedSeries" (chartUpdate)="chartUpdated($event)"></app-add-metric>
+        <app-reload-custom-chart *ngIf="isTemporaryChart && !isAnonymous" (chartUpdate)="loadSavedCustomChart($event)"></app-reload-custom-chart>
+        <app-add-metric *ngIf="!isTemporaryChart || isAnonymous" [chartLines]="chartLines" [preloadedSeries]="preloadedSeries" (chartUpdate)="chartUpdated($event)"></app-add-metric>
       </div>
     </span>
   </h6>
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.ts
index e73312d0..9b68aec2 100644
--- a/src/app/item-detail/analyze-charts/analyze-charts.component.ts
+++ b/src/app/item-detail/analyze-charts/analyze-charts.component.ts
@@ -43,15 +43,7 @@ export class AnalyzeChartsComponent implements OnInit {
   }
 
   ngOnInit() {
-    if (this.isAnonymous) {
-      return;
-    }
-    this.itemApiService
-      .fetchItemChartSettings(this.params.projectName, this.params.scenarioName, this.params.id)
-      .subscribe(_ => {
-        this.updateChart(_);
-        this.preloadedSeries = _;
-      });
+    // this needs to be initialized for both anonymous and logged-in user
     this.analyzeChartService.currentData.subscribe(data => {
       let chartLines;
       if (data) {
@@ -74,27 +66,18 @@ export class AnalyzeChartsComponent implements OnInit {
       }
     });
 
+    // exit onInit if user is anonymous, the code that's after is only for valid for logged-in user
+    if (this.isAnonymous) {
+      return;
+    }
 
-    this.itemChartService.selectedPlot$.subscribe(plot => {
-      const currentChartSeries = this.customChartsOptions.series;
-
-      if (Array.isArray(currentChartSeries) && currentChartSeries.length > 0) {
-        this.chartLines = plot.chartLines;
-
-        const updatedChartSeries = currentChartSeries.map(series => {
-          const labelChart = series.label;
-          const name = labelChart
-            ? labelChart
-            : "overall";
+    this.itemApiService
+      .fetchItemChartSettings(this.params.projectName, this.params.scenarioName, this.params.id)
+      .subscribe(_ => {
+        this.updateChart(_);
+        this.preloadedSeries = _;
+      });
 
-          return {
-            name,
-            metric: series.metric
-          };
-        });
-        this.updateChart(updatedChartSeries);
-      }
-    });
 
   }