diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts
index a328e51..bc726af 100644
--- a/pdb-js/src/app/plot.service.ts
+++ b/pdb-js/src/app/plot.service.ts
@@ -17,6 +17,7 @@ export class PlotService {
     this.plotTypes.push(new PlotType("CUM_DISTRIBUTION", "Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration));
     this.plotTypes.push(new PlotType("HISTOGRAM", "Histogram", "histogram", true, DataType.HistogramBin, DataType.HistogramCount));
     this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count));
+   
     this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other));
     this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration));
     this.plotTypes.push(new PlotType("RIDGELINES", "Ridgelines", "ridgelines", false, DataType.Other, DataType.Other));
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index 32b665f..32c6498 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -18,7 +18,7 @@
       <mat-form-field>
         <mat-label>Type:</mat-label>
         <mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
-          <mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
+          <mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
             <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
           </mat-option>
         </mat-select>
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index a968c7f..9857897 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -20,9 +20,7 @@ export class VisualizationPageComponent implements OnInit {
   readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
   
   dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
-  
-  availablePlotTypes = [];
-  
+    
   selectedPlotType = [];
   plotTypes: Array<any>;
     
@@ -64,9 +62,7 @@ export class VisualizationPageComponent implements OnInit {
     const that = this;
     this.plotTypes = this.plotService.getPlotTypes();
     this.selectedPlotType.push(this.plotTypes[0]);
-    
-    this.availablePlotTypes = [].concat(this.plotTypes);
-        
+            
     that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
     
       filterDefaults.fields.forEach(function(name) {
@@ -83,8 +79,9 @@ export class VisualizationPageComponent implements OnInit {
   }
   
   changePlotType(selectedPlotTypes: Array<PlotType>) {
-    const compatiblePlotTypes = this.availablePlotTypes.filter(pt => pt.compatible(selectedPlotTypes));
-    this.plotTypes = compatiblePlotTypes;
+    const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(selectedPlotTypes));
+    this.plotTypes.forEach(pt => pt.active=false);
+    compatiblePlotTypes.forEach(pt => pt.active=true);
   }
    
   
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index a262059..8c9cdce 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -64,6 +64,9 @@ button[disabled] .icon-inline {
   height: 1.5em;
   vertical-align: text-bottom;
 }
+.mat-option-disabled .icon-select {
+  opacity: 0.25;
+}
 
 a.external-link:after {
   background: transparent url('/assets/img/external-link.svg') no-repeat center bottom;