diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
index e78e83e525..fe034cf9e1 100644
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -33,8 +33,8 @@
         display: flex;
         flex-flow: column nowrap;
         .gl-plot.child-frame {
-            mct-plot { 
-                display: flex; 
+            mct-plot {
+                display: flex;
                 flex: 1 1 auto;
                 height: 100%;
                 position: relative;
@@ -51,18 +51,15 @@
             display: block;
         }
     }
-
 }
 
-
-
 .gl-plot {
-	color: $colorPlotFg;
+    color: $colorPlotFg;
     display: flex;
-	font-size: 0.7rem;
-	position: relative;
-	width: 100%;
-	height: 100%;
+    font-size: 0.7rem;
+    position: relative;
+    width: 100%;
+    height: 100%;
     min-height: $plotMinH;
 
     /********************************************* AXIS AND DISPLAY AREA */
@@ -74,7 +71,8 @@
             position: absolute;
             display: block;
             font-size: 1.5em;
-            top: $interiorMarginSm; left: $interiorMarginSm;
+            top: $interiorMarginSm;
+            left: $interiorMarginSm;
         }
     }
 
@@ -105,71 +103,71 @@
         }
     }
 
-	.gl-plot-axis-area {
-		position: absolute;
-		&.gl-plot-y {
-			top: nth($plotDisplayArea, 1);
-			right: auto;
-			bottom: nth($plotDisplayArea, 3);
-			left: 0;
-			width: $plotYBarW;
-		}
-	}
+    .gl-plot-axis-area {
+        position: absolute;
+        &.gl-plot-y {
+            top: nth($plotDisplayArea, 1);
+            right: auto;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+            width: $plotYBarW;
+        }
+    }
 
-	.gl-plot-coords {
-		box-sizing: border-box;
-		border-radius: $controlCr;
-		background: black;
-		color: lighten($colorBodyFg, 30%);
-		padding: 2px 5px;
-		position: absolute;
-		top: nth($plotDisplayArea,1) + $interiorMarginLg;
-		right: auto;
-		bottom: auto;
-		left: nth($plotDisplayArea,4) + $interiorMarginLg;
-		z-index: 10;
-		&:empty {
-			display: none;
-		}
-	}
+    .gl-plot-coords {
+        box-sizing: border-box;
+        border-radius: $controlCr;
+        background: black;
+        color: lighten($colorBodyFg, 30%);
+        padding: 2px 5px;
+        position: absolute;
+        top: nth($plotDisplayArea,1) + $interiorMarginLg;
+        right: auto;
+        bottom: auto;
+        left: nth($plotDisplayArea,4) + $interiorMarginLg;
+        z-index: 10;
+        &:empty {
+            display: none;
+        }
+    }
 
-	.gl-plot-label,
-	.l-plot-label {
-		color: $colorPlotLabelFg;
-		position: absolute;
-		text-align: center;
+    .gl-plot-label,
+    .l-plot-label {
+        color: $colorPlotLabelFg;
+        position: absolute;
+        text-align: center;
 
-		&.gl-plot-x-label,
-		&.l-plot-x-label {
-			top: auto;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			height: auto;
-		}
+        &.gl-plot-x-label,
+        &.l-plot-x-label {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: auto;
+        }
 
-		&.gl-plot-y-label,
-		&.l-plot-y-label {
-			$x: -50%;
-			$r: -90deg;
-			transform-origin: 50% 0;
-			transform: translateX($x) rotate($r);
-			display: inline-block;
-			margin-left: $interiorMargin; // Kick off the left edge
-			left: 0;
-			top: 50%;
-			white-space: nowrap;
-		}
-	}
+        &.gl-plot-y-label,
+        &.l-plot-y-label {
+            $x: -50%;
+            $r: -90deg;
+            transform-origin: 50% 0;
+            transform: translateX($x) rotate($r);
+            display: inline-block;
+            margin-left: $interiorMargin; // Kick off the left edge
+            left: 0;
+            top: 50%;
+            white-space: nowrap;
+        }
+    }
 
-	.gl-plot-x-options,
+    .gl-plot-x-options,
     .gl-plot-y-options {
-		$h: 24px;
-		position: absolute;
-		height: $h;
-		min-height: $h;
+        $h: 24px;
+        position: absolute;
+        height: $h;
+        min-height: $h;
         z-index: 2;
-	}
+    }
 
     .gl-plot-x-options {
         transform: translateX(-50%);
@@ -190,119 +188,192 @@
         right: $interiorMargin;
     }
 
-	.gl-plot-hash {
-		position: absolute;
-		border: 0 $colorPlotHash $stylePlotHash;
-		&.hash-v {
-			border-right-width: 1px;
-			height: 100%;
-		}
-		&.hash-h {
-			border-bottom-width: 1px;
-			width: 100%;
-		}
-	}
+    .gl-plot-hash {
+        position: absolute;
+        opacity: $opacityPlotHash;
+        &.hash-v {
+            border-right: 1px $colorPlotHash $stylePlotHash;
+            height: 100%;
+        }
+        &.hash-h {
+            border-bottom: 1px $colorPlotHash $stylePlotHash;
+            width: 100%;
+        }
+    }
 
-	/****************************** Limits and Out-of-Bounds data */
+    /****************************** Limits and Out-of-Bounds data */
 
-	.l-limit-bar,
-	.l-oob-data {
-		position: absolute;
-		left: 0;
-		right: 0;
-		width: auto;
-	}
+    .l-limit-bar,
+    .l-oob-data {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: auto;
+    }
 
-	.l-limit-bar {
-		// Limits in plot display area
-		@mixin limitBg($c) {
-			background: rgba($c, 0.2);
-		}
+    .l-limit-bar {
+        // Limits in plot display area
+        @mixin limitBg($c) {
+            background: rgba($c, 0.2);
+        }
 
-		height: auto;
-		z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
-		&.s-limit-red { @include limitBg($colorLimitRedBg); }
-	}
+        height: auto;
+        z-index: 0;
+        &.s-limit-yellow {
+            @include limitBg($colorLimitYellowBg);
+        }
+        &.s-limit-red {
+            @include limitBg($colorLimitRedBg);
+        }
+    }
 
-	.l-oob-data {
-		$c: #7748d6;
-		$a: 0.5;
-		$h: 10px;
-		@include absPosDefault();
-		pointer-events: none;
-		height: $h;
-		z-index: 1;
-		&.l-oob-data-up {
-			top: 0;
-			bottom: auto;
-			@include linearGlow(0deg, $c, $a);
-		}
-		&.l-oob-data-dwn {
-			bottom: 0;
-			top: auto;
-			@include linearGlow(180deg, $c, $a);
-		}
-	}
+    .l-oob-data {
+        $c: #7748d6;
+        $a: 0.5;
+        $h: 10px;
+        @include absPosDefault();
+        pointer-events: none;
+        height: $h;
+        z-index: 1;
+        &.l-oob-data-up {
+            top: 0;
+            bottom: auto;
+            @include linearGlow(0deg, $c, $a);
+        }
+        &.l-oob-data-dwn {
+            bottom: 0;
+            top: auto;
+            @include linearGlow(180deg, $c, $a);
+        }
+    }
 }
 
-
 .gl-plot-display-area,
 .plot-display-area {
-    @if $colorPlotBg != none { background-color: $colorPlotBg; }
+    @if $colorPlotBg != none {
+        background-color: $colorPlotBg;
+    }
     cursor: crosshair;
     border: 1px solid $colorPlotAreaBorder;
 }
 
 .tick {
-	position: absolute;
-	border: 0 $colorPlotHash solid;
-	&.tick-x {
-		border-right-width: 1px;
-		height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
-	}
+    position: absolute;
+    border: 0 $colorPlotHash solid;
+    &.tick-x {
+        border-right-width: 1px;
+        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
+    }
 }
 
 .gl-plot-tick,
 .tick-label {
     @include reverseEllipsis();
-	font-size: 0.7rem;
-	position: absolute;
-	&.gl-plot-x-tick-label,
-	&.tick-label-x {
-		right: auto;
-		bottom: auto;
-		left: auto;
-		height: auto;
-		width: 20%;
-		margin-left: -10%;
-		text-align: center;
-	}
-	&.gl-plot-y-tick-label,
-	&.tick-label-y {
-		top: auto;
-		height: 1em;
-		width: auto;
-		margin-bottom: -0.5em;
-		text-align: right;
-	}
+    font-size: 0.7rem;
+    position: absolute;
+    &.gl-plot-x-tick-label,
+    &.tick-label-x {
+        right: auto;
+        bottom: auto;
+        left: auto;
+        height: auto;
+        width: 20%;
+        margin-left: -10%;
+        text-align: center;
+    }
+    &.gl-plot-y-tick-label,
+    &.tick-label-y {
+        top: auto;
+        height: 1em;
+        width: auto;
+        margin-bottom: -0.5em;
+        text-align: right;
+    }
 }
 
 .gl-plot-tick {
-	&.gl-plot-x-tick-label {
-		top: $interiorMargin;
-	}
-	&.gl-plot-y-tick-label {
-		right: $interiorMargin;
-		left: $interiorMargin;
-	}
+    &.gl-plot-x-tick-label {
+        top: $interiorMargin;
+    }
+    &.gl-plot-y-tick-label {
+        right: $interiorMargin;
+        left: $interiorMargin;
+    }
 }
 
 .tick-label {
-	&.tick-label-x {
-		top: 0;
-	}
-	&.tick-label-y {
-		right: 0; left: 0;
-	}
+    &.tick-label-x {
+        top: 0;
+    }
+    &.tick-label-y {
+        right: 0;
+        left: 0;
+    }
+}
+
+.export-plot {
+    $bg: white;
+    $fg: black;
+    $gry: #999;
+
+    background: $bg !important;
+    z-index: -10;
+
+    .l-view-section {
+        $m: $interiorMargin;
+        top: $m !important;
+        right: $m;
+        bottom: $m;
+        left: $m;
+
+        .s-status-timeconductor-unsynced .holder-plot {
+            .t-object-alert.t-alert-unsynced {
+                display: none;
+            }
+        }
+    }
+
+    .gl-plot-display-area {
+        background: none !important;
+        border-color: $gry !important;
+
+        .gl-plot-local-controls,
+        .h-local-controls {
+            opacity: 0;
+        }
+    }
+
+    .gl-plot {
+        color: $fg;
+
+        .gl-plot-hash {
+            opacity: 0.1;
+            border-color: $fg;
+        }
+    }
+
+    table {
+        thead {
+            border-bottom: none;
+
+            th {
+                background: #eee;
+                border-left-color: $bg;
+                color: #666;
+            }
+
+            tr {
+                border: none;
+            }
+        }
+        tbody {
+            tr {
+                border-top: 1px solid #ccc;
+            }
+
+            td {
+                color: $fg;
+            }
+        }
+    }
 }
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 18ce0e4925..68f1af2101 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -183,7 +183,8 @@ $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: rgba(black, 0.1);
 $colorPlotFg: $colorBodyFg;
-$colorPlotHash: $colorTick;
+$colorPlotHash: white;
+$opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 7f4e7b708b..2511902f68 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -183,7 +183,8 @@ $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: rgba(black, 0.05);
 $colorPlotFg: $colorBodyFg;
-$colorPlotHash: $colorTick;
+$colorPlotHash: black;
+$opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
diff --git a/src/plugins/plot/src/services/ExportImageService.js b/src/plugins/plot/src/services/ExportImageService.js
index 0738c40f07..c3566cda7b 100644
--- a/src/plugins/plot/src/services/ExportImageService.js
+++ b/src/plugins/plot/src/services/ExportImageService.js
@@ -40,8 +40,8 @@ define(
          * @constructor
          */
         function ExportImageService(dialogService) {
-            this.exportCount = 0;
             this.dialogService = dialogService;
+            this.exportCount = 0;
         }
 
         /**
@@ -51,7 +51,8 @@ define(
          * @param {string} type of image to convert the element to.
          * @returns {promise}
          */
-        ExportImageService.prototype.renderElement = function (element, imageType, color) {
+        ExportImageService.prototype.renderElement = function (element, imageType, className) {
+
             var dialogService = this.dialogService,
                 dialog = dialogService.showBlockingMessage({
                     title: "Capturing...",
@@ -66,18 +67,18 @@ define(
                 mimeType = "image/jpeg";
             }
 
-            var exportId = 'export-element-' + this.exportCount;
-            this.exportCount++;
-            var oldId = element.id;
-            element.id = exportId;
+            if (className) {
+                var exportId = 'export-element-' + this.exportCount;
+                this.exportCount++;
+                var oldId = element.id;
+                element.id = exportId;
+            }
 
             return html2canvas(element, {
                 onclone: function (document) {
-                    // Make export style changes to cloned document so that
-                    // users don't see view flickering.
-                    var clonedElement = document.getElementById(exportId);
-                    if (clonedElement && color) {
-                        clonedElement.style.backgroundColor = color;
+                    if (className) {
+                        var clonedElement = document.getElementById(exportId);
+                        clonedElement.classList.add(className);
                     }
                     element.id = oldId;
                 }
@@ -107,10 +108,11 @@ define(
          * Takes a screenshot of a DOM node and exports to JPG.
          * @param {node} element to be exported
          * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
          * @returns {promise}
          */
-        ExportImageService.prototype.exportJPG = function (element, filename, color) {
-            return this.renderElement(element, "jpg", color).then(function (img) {
+        ExportImageService.prototype.exportJPG = function (element, filename, className) {
+            return this.renderElement(element, "jpg", className).then(function (img) {
                 saveAs(img, filename);
             });
         };
@@ -119,10 +121,11 @@ define(
          * Takes a screenshot of a DOM node and exports to PNG.
          * @param {node} element to be exported
          * @param {string} filename the exported image
+         * @param {string} className to be added to element before capturing (optional)
          * @returns {promise}
          */
-        ExportImageService.prototype.exportPNG = function (element, filename, color) {
-            return this.renderElement(element, "png", color).then(function (img) {
+        ExportImageService.prototype.exportPNG = function (element, filename, className) {
+            return this.renderElement(element, "png", className).then(function (img) {
                 saveAs(img, filename);
             });
         };
diff --git a/src/plugins/plot/src/telemetry/PlotController.js b/src/plugins/plot/src/telemetry/PlotController.js
index fc2c67a791..b18864d21b 100644
--- a/src/plugins/plot/src/telemetry/PlotController.js
+++ b/src/plugins/plot/src/telemetry/PlotController.js
@@ -245,7 +245,7 @@ define([
      */
     PlotController.prototype.exportJPG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'white')
+        this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));
@@ -256,7 +256,7 @@ define([
      */
     PlotController.prototype.exportPNG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'white')
+        this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));
diff --git a/src/plugins/plot/src/telemetry/StackedPlotController.js b/src/plugins/plot/src/telemetry/StackedPlotController.js
index 8cc432b1d6..dceaee46cb 100644
--- a/src/plugins/plot/src/telemetry/StackedPlotController.js
+++ b/src/plugins/plot/src/telemetry/StackedPlotController.js
@@ -142,7 +142,7 @@ define([
 
     StackedPlotController.prototype.exportJPG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg')
+        this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));
@@ -150,7 +150,7 @@ define([
 
     StackedPlotController.prototype.exportPNG = function () {
         this.hideExportButtons = true;
-        this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png')
+        this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png', 'export-plot')
             .finally(function () {
                 this.hideExportButtons = false;
             }.bind(this));