diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss
index d036814021..656a535c8f 100644
--- a/src/plugins/displayLayout/components/layout-frame.scss
+++ b/src/plugins/displayLayout/components/layout-frame.scss
@@ -28,7 +28,6 @@
 
         &[s-selected] {
             // All frames selected while editing
-            border: $editFrameSelectedBorder;
             box-shadow: $editFrameSelectedShdw;
 
             .c-frame__move-bar {
diff --git a/src/plugins/flexibleLayout/components/flexible-layout.scss b/src/plugins/flexibleLayout/components/flexible-layout.scss
index ac44eb3d3c..6fe96a446b 100644
--- a/src/plugins/flexibleLayout/components/flexible-layout.scss
+++ b/src/plugins/flexibleLayout/components/flexible-layout.scss
@@ -141,6 +141,10 @@
                 }
             }
         }
+
+        [s-selected].c-fl-frame__drag-wrapper {
+            border: $editFrameSelectedBorder;
+        }
     }
 
     /****** THEIR FRAMES */
diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index 8ae4f08bf5..c1ff233ac5 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -26,6 +26,7 @@
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
 >
     <plot-legend
+        v-if="!isNestedWithinAStackedPlot"
         :cursor-locked="!!lockHighlightPoint"
         :series="seriesModels"
         :highlights="highlights"
@@ -246,6 +247,18 @@ export default {
             default() {
                 return 0;
             }
+        },
+        limitLineLabels: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        colorPalette: {
+            type: Object,
+            default() {
+                return undefined;
+            }
         }
     },
     data() {
@@ -266,7 +279,7 @@ export default {
             isRealTime: this.openmct.time.clock() !== undefined,
             loaded: false,
             isTimeOutOfSync: false,
-            showLimitLineLabels: undefined,
+            showLimitLineLabels: this.limitLineLabels,
             isFrozenOnMouseDown: false,
             hasSameRangeValue: true,
             cursorGuide: this.initCursorGuide,
@@ -274,13 +287,22 @@ export default {
         };
     },
     computed: {
+        isNestedWithinAStackedPlot() {
+            const isNavigatedObject = this.openmct.router.isNavigatedObject([this.domainObject].concat(this.path));
+
+            return !isNavigatedObject && this.path.find((pathObject, pathObjIndex) => pathObject.type === 'telemetry.plot.stacked');
+        },
         isFrozen() {
             return this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
         },
         plotLegendPositionClass() {
-            return `plot-legend-${this.config.legend.get('position')}`;
+            return !this.isNestedWithinAStackedPlot ? `plot-legend-${this.config.legend.get('position')}` : '';
         },
         plotLegendExpandedStateClass() {
+            if (this.isNestedWithinAStackedPlot) {
+                return '';
+            }
+
             if (this.config.legend.get('expanded')) {
                 return 'plot-legend-expanded';
             } else {
@@ -292,6 +314,12 @@ export default {
         }
     },
     watch: {
+        limitLineLabels: {
+            handler(limitLineLabels) {
+                this.legendHoverChanged(limitLineLabels);
+            },
+            deep: true
+        },
         initGridLines(newGridLines) {
             this.gridLines = newGridLines;
         },
@@ -310,6 +338,11 @@ export default {
         this.config = this.getConfig();
         this.legend = this.config.legend;
 
+        if (this.isNestedWithinAStackedPlot) {
+            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+            this.$emit('configLoaded', configId);
+        }
+
         this.listenTo(this.config.series, 'add', this.addSeries, this);
         this.listenTo(this.config.series, 'remove', this.removeSeries, this);
 
@@ -375,6 +408,7 @@ export default {
                     id: configId,
                     domainObject: this.domainObject,
                     openmct: this.openmct,
+                    palette: this.colorPalette,
                     callback: (data) => {
                         this.data = data;
                     }
@@ -758,6 +792,8 @@ export default {
                         };
                     });
             }
+
+            this.$emit('highlights', this.highlights);
         },
 
         untrackMousePosition() {
@@ -792,6 +828,7 @@ export default {
 
             if (this.isMouseClick()) {
                 this.lockHighlightPoint = !this.lockHighlightPoint;
+                this.$emit('lockHighlightPoint', this.lockHighlightPoint);
             }
 
             if (this.pan) {
diff --git a/src/plugins/plot/configuration/PlotConfigurationModel.js b/src/plugins/plot/configuration/PlotConfigurationModel.js
index 0f6a56cd6f..ce0c6e532e 100644
--- a/src/plugins/plot/configuration/PlotConfigurationModel.js
+++ b/src/plugins/plot/configuration/PlotConfigurationModel.js
@@ -68,7 +68,8 @@ export default class PlotConfigurationModel extends Model {
         this.series = new SeriesCollection({
             models: options.model.series,
             plot: this,
-            openmct: options.openmct
+            openmct: options.openmct,
+            palette: options.palette
         });
 
         if (this.get('domainObject').type === 'telemetry.plot.overlay') {
diff --git a/src/plugins/plot/configuration/SeriesCollection.js b/src/plugins/plot/configuration/SeriesCollection.js
index 33160a8fa3..b5bb81dbbc 100644
--- a/src/plugins/plot/configuration/SeriesCollection.js
+++ b/src/plugins/plot/configuration/SeriesCollection.js
@@ -39,7 +39,7 @@ export default class SeriesCollection extends Collection {
         this.modelClass = PlotSeries;
         this.plot = options.plot;
         this.openmct = options.openmct;
-        this.palette = new ColorPalette();
+        this.palette = options.palette || new ColorPalette();
         this.listenTo(this, 'add', this.onSeriesAdd, this);
         this.listenTo(this, 'remove', this.onSeriesRemove, this);
         this.listenTo(this.plot, 'change:domainObject', this.trackPersistedConfig, this);
diff --git a/src/plugins/plot/configuration/YAxisModel.js b/src/plugins/plot/configuration/YAxisModel.js
index aaedcaae30..8c03631d6a 100644
--- a/src/plugins/plot/configuration/YAxisModel.js
+++ b/src/plugins/plot/configuration/YAxisModel.js
@@ -260,7 +260,7 @@ export default class YAxisModel extends Model {
         const plotModel = this.plot.get('domainObject');
         const label = plotModel.configuration?.yAxis?.label;
         const sampleSeries = seriesCollection.first();
-        if (!sampleSeries) {
+        if (!sampleSeries || !sampleSeries.metadata) {
             if (!label) {
                 this.unset('label');
             }
diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
index b85a2683f8..12ee36e7d8 100644
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -24,7 +24,10 @@
     v-if="loaded"
     class="js-plot-options-browse"
 >
-    <ul class="c-tree">
+    <ul
+        v-if="!isStackedPlotObject"
+        class="c-tree"
+    >
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <plot-options-item
             v-for="series in plotSeries"
@@ -36,7 +39,10 @@
         v-if="plotSeries.length"
         class="grid-properties"
     >
-        <ul class="l-inspector-part">
+        <ul
+            v-if="!isStackedPlotObject"
+            class="l-inspector-part js-yaxis-properties"
+        >
             <h2 title="Y axis settings for this object">Y Axis</h2>
             <li class="grid-row">
                 <div
@@ -84,7 +90,10 @@
                 <div class="grid-cell value">{{ rangeMax }}</div>
             </li>
         </ul>
-        <ul class="l-inspector-part">
+        <ul
+            v-if="isStackedPlotObject || !isNestedWithinAStackedPlot"
+            class="l-inspector-part js-legend-properties"
+        >
             <h2 title="Legend settings for this object">Legend</h2>
             <li class="grid-row">
                 <div
@@ -144,7 +153,7 @@ export default {
     components: {
         PlotOptionsItem
     },
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'domainObject', 'path'],
     data() {
         return {
             config: {},
@@ -167,12 +176,21 @@ export default {
             plotSeries: []
         };
     },
+    computed: {
+        isNestedWithinAStackedPlot() {
+            return this.path.find((pathObject, pathObjIndex) => pathObjIndex > 0 && pathObject.type === 'telemetry.plot.stacked');
+        },
+        isStackedPlotObject() {
+            return this.path.find((pathObject, pathObjIndex) => pathObjIndex === 0 && pathObject.type === 'telemetry.plot.stacked');
+        }
+    },
     mounted() {
         eventHelpers.extend(this);
         this.config = this.getConfig();
         this.registerListeners();
         this.initConfiguration();
         this.loaded = true;
+
     },
     beforeDestroy() {
         this.stopListening();
diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 77dc891988..234e30332e 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -24,21 +24,31 @@
     v-if="loaded"
     class="js-plot-options-edit"
 >
-    <ul class="c-tree">
+    <ul
+        v-if="!isStackedPlotObject"
+        class="c-tree"
+    >
         <h2 title="Display properties for this object">Plot Series</h2>
         <li
             v-for="series in plotSeries"
             :key="series.key"
         >
-            <series-form :series="series" />
+            <series-form
+                :series="series"
+                @seriesUpdated="updateSeriesConfigForObject"
+            />
         </li>
     </ul>
     <y-axis-form
-        v-if="plotSeries.length"
+        v-if="plotSeries.length && !isStackedPlotObject"
         class="grid-properties"
         :y-axis="config.yAxis"
+        @seriesUpdated="updateSeriesConfigForObject"
     />
-    <ul class="l-inspector-part">
+    <ul
+        v-if="isStackedPlotObject || !isStackedPlotNestedObject"
+        class="l-inspector-part"
+    >
         <h2 title="Legend options">Legend</h2>
         <legend-form
             v-if="plotSeries.length"
@@ -61,7 +71,7 @@ export default {
         SeriesForm,
         YAxisForm
     },
-    inject: ['openmct', 'domainObject'],
+    inject: ['openmct', 'domainObject', 'path'],
     data() {
         return {
             config: {},
@@ -69,6 +79,14 @@ export default {
             loaded: false
         };
     },
+    computed: {
+        isStackedPlotNestedObject() {
+            return this.path.find((pathObject, pathObjIndex) => pathObjIndex > 0 && pathObject.type === 'telemetry.plot.stacked');
+        },
+        isStackedPlotObject() {
+            return this.path.find((pathObject, pathObjIndex) => pathObjIndex === 0 && pathObject.type === 'telemetry.plot.stacked');
+        }
+    },
     mounted() {
         eventHelpers.extend(this);
         this.config = this.getConfig();
@@ -98,6 +116,24 @@ export default {
         resetAllSeries() {
             this.plotSeries = [];
             this.config.series.forEach(this.addSeries, this);
+        },
+
+        updateSeriesConfigForObject(config) {
+            const stackedPlotObject = this.path.find((pathObject) => pathObject.type === 'telemetry.plot.stacked');
+            let index = stackedPlotObject.configuration.series.findIndex((seriesConfig) => {
+                return this.openmct.objects.areIdsEqual(seriesConfig.identifier, config.identifier);
+            });
+            if (index < 0) {
+                index = stackedPlotObject.configuration.series.length;
+            }
+
+            const configPath = `configuration.series[${index}].${config.path}`;
+            this.openmct.objects.mutate(
+                stackedPlotObject,
+                configPath,
+                config.value
+            );
+
         }
     }
 };
diff --git a/src/plugins/plot/inspector/PlotsInspectorViewProvider.js b/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
index 16b88412c5..aebacfa7eb 100644
--- a/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
+++ b/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
@@ -13,8 +13,10 @@ export default function PlotsInspectorViewProvider(openmct) {
 
             let object = selection[0][0].context.item;
 
-            return object
-                && object.type === 'telemetry.plot.overlay';
+            const isOverlayPlotObject = object && object.type === 'telemetry.plot.overlay';
+            const isStackedPlotObject = object && object.type === 'telemetry.plot.stacked';
+
+            return isStackedPlotObject || isOverlayPlotObject;
         },
         view: function (selection) {
             let component;
diff --git a/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js b/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js
new file mode 100644
index 0000000000..8cd6bc78d2
--- /dev/null
+++ b/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js
@@ -0,0 +1,59 @@
+
+import PlotOptions from "./PlotOptions.vue";
+import Vue from 'vue';
+
+export default function StackedPlotsInspectorViewProvider(openmct) {
+    return {
+        key: 'stacked-plots-inspector',
+        name: 'Stacked Plots Inspector View',
+        canView: function (selection) {
+            if (selection.length === 0 || selection[0].length === 0) {
+                return false;
+            }
+
+            const object = selection[0][0].context.item;
+            const parent = selection[0].length > 1 && selection[0][1].context.item;
+
+            const isOverlayPlotObject = object && object.type === 'telemetry.plot.overlay';
+            const isParentStackedPlotObject = parent && parent.type === 'telemetry.plot.stacked';
+
+            return !isOverlayPlotObject && isParentStackedPlotObject;
+        },
+        view: function (selection) {
+            let component;
+            let objectPath;
+
+            if (selection.length) {
+                objectPath = selection[0].map((selectionItem) => {
+                    return selectionItem.context.item;
+                });
+            }
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            PlotOptions: PlotOptions
+                        },
+                        provide: {
+                            openmct,
+                            domainObject: selection[0][0].context.item,
+                            path: objectPath
+                        },
+                        template: '<plot-options></plot-options>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}
diff --git a/src/plugins/plot/inspector/forms/SeriesForm.vue b/src/plugins/plot/inspector/forms/SeriesForm.vue
index 8434bd3497..2a7ff4d2b0 100644
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@@ -298,28 +298,45 @@ export default {
 
             this.series.set('color', color);
 
-            const getPath = this.dynamicPathForKey('color');
-            const seriesColorPath = getPath(this.domainObject, this.series);
+            if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+                this.$emit('seriesUpdated', {
+                    identifier: this.domainObject.identifier,
+                    path: `series.color`,
+                    value: color.asHexString()
+                });
+            } else {
+                const getPath = this.dynamicPathForKey('color');
+                const seriesColorPath = getPath(this.domainObject, this.series);
 
-            this.openmct.objects.mutate(
-                this.domainObject,
-                seriesColorPath,
-                color.asHexString()
-            );
+                this.openmct.objects.mutate(
+                    this.domainObject,
+                    seriesColorPath,
+                    color.asHexString()
+                );
+            }
 
             if (otherSeriesWithColor) {
                 otherSeriesWithColor.set('color', oldColor);
 
-                const otherSeriesColorPath = getPath(
-                    this.domainObject,
-                    otherSeriesWithColor
-                );
+                if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+                    this.$emit('seriesUpdated', {
+                        identifier: this.domainObject.identifier,
+                        path: `series.color`,
+                        value: oldColor.asHexString()
+                    });
+                } else {
+                    const getPath = this.dynamicPathForKey('color');
+                    const otherSeriesColorPath = getPath(
+                        this.domainObject,
+                        otherSeriesWithColor
+                    );
 
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    otherSeriesColorPath,
-                    oldColor.asHexString()
-                );
+                    this.openmct.objects.mutate(
+                        this.domainObject,
+                        otherSeriesColorPath,
+                        oldColor.asHexString()
+                    );
+                }
             }
         },
         toggleExpanded() {
@@ -343,11 +360,19 @@ export default {
             if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
                 this.series.set(formKey, coerce(newVal, formField.coerce));
                 if (path) {
-                    this.openmct.objects.mutate(
-                        this.domainObject,
-                        path(this.domainObject, this.series),
-                        coerce(newVal, formField.coerce)
-                    );
+                    if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+                        this.$emit('seriesUpdated', {
+                            identifier: this.domainObject.identifier,
+                            path: `series.${formKey}`,
+                            value: coerce(newVal, formField.coerce)
+                        });
+                    } else {
+                        this.openmct.objects.mutate(
+                            this.domainObject,
+                            path(this.domainObject, this.series),
+                            coerce(newVal, formField.coerce)
+                        );
+                    }
                 }
             }
         },
diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue
index bf85312302..c0dc5ec57a 100644
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@@ -230,11 +230,19 @@ export default {
                 // TODO: Why do we mutate yAxis twice, once directly, once via objects.mutate? Or are they different objects?
                 this.yAxis.set(formKey, newVal);
                 if (path) {
-                    this.openmct.objects.mutate(
-                        this.domainObject,
-                        path(this.domainObject, this.yAxis),
-                        newVal
-                    );
+                    if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+                        this.$emit('seriesUpdated', {
+                            identifier: this.domainObject.identifier,
+                            path: `yAxis.${formKey}`,
+                            value: newVal
+                        });
+                    } else {
+                        this.openmct.objects.mutate(
+                            this.domainObject,
+                            path(this.domainObject, this.yAxis),
+                            newVal
+                        );
+                    }
                 }
             }
         }
diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index e62fc5d995..1bdf4b3bb9 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -49,8 +49,8 @@
                 title="Cursor is point locked. Click anywhere in the plot to unlock."
             ></div>
             <plot-legend-item-collapsed
-                v-for="seriesObject in series"
-                :key="seriesObject.keyString"
+                v-for="(seriesObject, seriesIndex) in series"
+                :key="`seriesObject.keyString-${seriesIndex}`"
                 :highlights="highlights"
                 :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
                 :series-object="seriesObject"
@@ -95,8 +95,8 @@
                 </thead>
                 <tbody>
                     <plot-legend-item-expanded
-                        v-for="seriesObject in series"
-                        :key="seriesObject.keyString"
+                        v-for="(seriesObject, seriesIndex) in series"
+                        :key="`seriesObject.keyString-${seriesIndex}`"
                         :series-object="seriesObject"
                         :highlights="highlights"
                         :legend="legend"
diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
index 690afd9261..197f9da9df 100644
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -41,7 +41,7 @@
         <span class="plot-series-name">{{ nameWithUnit }}</span>
     </div>
     <div
-        v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')"
+        v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none' && valueToShowWhenCollapsed !== 'units')"
         class="plot-series-value hover-value-enabled"
         :class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]"
     >
diff --git a/src/plugins/plot/plugin.js b/src/plugins/plot/plugin.js
index 89f6f005b7..efee6ca9aa 100644
--- a/src/plugins/plot/plugin.js
+++ b/src/plugins/plot/plugin.js
@@ -26,6 +26,7 @@ import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider';
 import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy';
 import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy';
 import PlotViewActions from "./actions/ViewActions";
+import StackedPlotsInspectorViewProvider from "./inspector/StackedPlotsInspectorViewProvider";
 
 export default function () {
     return function install(openmct) {
@@ -39,9 +40,8 @@ export default function () {
             initialize: function (domainObject) {
                 domainObject.composition = [];
                 domainObject.configuration = {
-                    series: [],
-                    yAxis: {},
-                    xAxis: {}
+                    //series is an array of objects of type: {identifier, series: {color...}, yAxis:{}}
+                    series: []
                 };
             },
             priority: 891
@@ -55,7 +55,11 @@ export default function () {
             creatable: true,
             initialize: function (domainObject) {
                 domainObject.composition = [];
-                domainObject.configuration = {};
+                domainObject.configuration = {
+                    series: [],
+                    yAxis: {},
+                    xAxis: {}
+                };
             },
             priority: 890
         });
@@ -65,6 +69,7 @@ export default function () {
         openmct.objectViews.addProvider(new PlotViewProvider(openmct));
 
         openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new StackedPlotsInspectorViewProvider(openmct));
 
         openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
         openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js
index a78107ffee..36859a50d0 100644
--- a/src/plugins/plot/pluginSpec.js
+++ b/src/plugins/plot/pluginSpec.js
@@ -23,7 +23,6 @@
 import {createMouseEvent, createOpenMct, resetApplicationState, spyOnBuiltins} from "utils/testing";
 import PlotVuePlugin from "./plugin";
 import Vue from "vue";
-import StackedPlot from "./stackedPlot/StackedPlot.vue";
 import configStore from "./configuration/ConfigStore";
 import EventEmitter from "EventEmitter";
 import PlotOptions from "./inspector/PlotOptions.vue";
@@ -348,14 +347,20 @@ describe("the plugin", function () {
                 }
             };
 
+            openmct.router.path = [testTelemetryObject];
+
             applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
             plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
-            plotView = plotViewProvider.view(testTelemetryObject, [testTelemetryObject]);
+            plotView = plotViewProvider.view(testTelemetryObject, []);
             plotView.show(child, true);
 
             return Vue.nextTick();
         });
 
+        afterEach(() => {
+            openmct.router.path = null;
+        });
+
         it("Makes only one request for telemetry on load", () => {
             expect(openmct.telemetry.request).toHaveBeenCalledTimes(1);
         });
@@ -523,360 +528,6 @@ describe("the plugin", function () {
         });
     });
 
-    describe("The stacked plot view", () => {
-        let testTelemetryObject;
-        let testTelemetryObject2;
-        let config;
-        let stackedPlotObject;
-        let component;
-        let mockComposition;
-        let plotViewComponentObject;
-
-        beforeEach(() => {
-
-            stackedPlotObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-plot"
-                },
-                type: "telemetry.plot.stacked",
-                name: "Test Stacked Plot"
-            };
-
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                },
-                configuration: {
-                    objectStyles: {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: 'rgb(0, 200, 0)',
-                                color: '',
-                                border: ''
-                            }
-                        },
-                        conditionSetIdentifier: {
-                            namespace: '',
-                            key: 'testConditionSetId'
-                        },
-                        selectedConditionId: 'conditionId1',
-                        defaultConditionId: 'conditionId1',
-                        styles: [
-                            {
-                                conditionId: 'conditionId1',
-                                style: {
-                                    backgroundColor: 'rgb(0, 155, 0)',
-                                    color: '',
-                                    output: '',
-                                    border: ''
-                                }
-                            }
-                        ]
-                    }
-                }
-            };
-
-            testTelemetryObject2 = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object2"
-                },
-                type: "test-object",
-                name: "Test Object2",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key2",
-                        name: "Some attribute2",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key2",
-                        name: "Another attribute2",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testTelemetryObject);
-
-                return [testTelemetryObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            let viewContainer = document.createElement("div");
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    StackedPlot
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: stackedPlotObject,
-                    composition: openmct.composition.get(stackedPlotObject),
-                    path: [stackedPlotObject]
-                },
-                template: "<stacked-plot></stacked-plot>"
-            });
-
-            return telemetryPromise
-                .then(Vue.nextTick())
-                .then(() => {
-                    plotViewComponentObject = component.$root.$children[0];
-                    const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
-                    config = configStore.get(configId);
-                });
-        });
-
-        it("Renders a collapsed legend for every telemetry", () => {
-            let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-            expect(legend.length).toBe(1);
-            expect(legend[0].innerHTML).toEqual("Test Object");
-        });
-
-        it("Renders an expanded legend for every telemetry", () => {
-            let legendControl = element.querySelector(".c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle");
-            const clickEvent = createMouseEvent("click");
-
-            legendControl.dispatchEvent(clickEvent);
-
-            let legend = element.querySelectorAll(".plot-wrapper-expanded-legend .plot-legend-item td");
-            expect(legend.length).toBe(6);
-        });
-
-        it("Renders X-axis ticks for the telemetry object", (done) => {
-            let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
-            expect(xAxisElement.length).toBe(1);
-
-            config.xAxis.set('displayRange', {
-                min: 0,
-                max: 4
-            });
-
-            Vue.nextTick(() => {
-                let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-                expect(ticks.length).toBe(9);
-
-                done();
-            });
-        });
-
-        it("Renders Y-axis ticks for the telemetry object", (done) => {
-            config.yAxis.set('displayRange', {
-                min: 10,
-                max: 20
-            });
-            Vue.nextTick(() => {
-                let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper");
-                expect(yAxisElement.length).toBe(1);
-                let ticks = yAxisElement[0].querySelectorAll(".gl-plot-tick");
-                expect(ticks.length).toBe(6);
-                done();
-            });
-        });
-
-        it("Renders Y-axis options for the telemetry object", () => {
-            let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select");
-            expect(yAxisElement.length).toBe(1);
-            let options = yAxisElement[0].querySelectorAll("option");
-            expect(options.length).toBe(2);
-            expect(options[0].value).toBe("Some attribute");
-            expect(options[1].value).toBe("Another attribute");
-        });
-
-        it("turns on cursor Guides all telemetry objects", (done) => {
-            expect(plotViewComponentObject.$children[0].cursorGuide).toBeFalse();
-            plotViewComponentObject.$children[0].cursorGuide = true;
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].cursorGuide).toBeTrue();
-                done();
-            });
-        });
-
-        it("shows grid lines for all telemetry objects", () => {
-            expect(plotViewComponentObject.$children[0].gridLines).toBeTrue();
-            let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
-            let visible = 0;
-            gridLinesContainer.forEach(el => {
-                if (el.style.display !== "none") {
-                    visible++;
-                }
-            });
-            expect(visible).toBe(2);
-        });
-
-        it("hides grid lines for all telemetry objects", (done) => {
-            expect(plotViewComponentObject.$children[0].gridLines).toBeTrue();
-            plotViewComponentObject.$children[0].gridLines = false;
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].gridLines).toBeFalse();
-                let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
-                let visible = 0;
-                gridLinesContainer.forEach(el => {
-                    if (el.style.display !== "none") {
-                        visible++;
-                    }
-                });
-                expect(visible).toBe(0);
-                done();
-            });
-        });
-
-        it('plots a new series when a new telemetry object is added', (done) => {
-            mockComposition.emit('add', testTelemetryObject2);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(2);
-                expect(legend[1].innerHTML).toEqual("Test Object2");
-                done();
-            });
-        });
-
-        it('removes plots from series when a telemetry object is removed', (done) => {
-            mockComposition.emit('remove', testTelemetryObject.identifier);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(0);
-                done();
-            });
-        });
-
-        it("Changes the label of the y axis when the option changes", (done) => {
-            let selectEl = element.querySelector('.gl-plot-y-label__select');
-            selectEl.value = 'Another attribute';
-            selectEl.dispatchEvent(new Event("change"));
-
-            Vue.nextTick(() => {
-                expect(config.yAxis.get('label')).toEqual('Another attribute');
-                done();
-            });
-        });
-
-        it("Renders a new series when added to one of the plots", (done) => {
-            mockComposition.emit('add', testTelemetryObject2);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(2);
-                expect(legend[1].innerHTML).toEqual("Test Object2");
-                done();
-            });
-        });
-
-        it("Adds a new point to the plot", (done) => {
-            let originalLength = config.series.models[0].getSeriesData().length;
-            config.series.models[0].add({
-                utc: 2,
-                'some-key': 1,
-                'some-other-key': 2
-            });
-            Vue.nextTick(() => {
-                const seriesData = config.series.models[0].getSeriesData();
-                expect(seriesData.length).toEqual(originalLength + 1);
-                done();
-            });
-        });
-
-        it("updates the xscale", (done) => {
-            config.xAxis.set('displayRange', {
-                min: 0,
-                max: 10
-            });
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].xScale.domain()).toEqual({
-                    min: 0,
-                    max: 10
-                });
-                done();
-            });
-        });
-
-        it("updates the yscale", (done) => {
-            config.yAxis.set('displayRange', {
-                min: 10,
-                max: 20
-            });
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].yScale.domain()).toEqual({
-                    min: 10,
-                    max: 20
-                });
-                done();
-            });
-        });
-
-        it("shows styles for telemetry objects if available", (done) => {
-            Vue.nextTick(() => {
-                let conditionalStylesContainer = element.querySelectorAll(".c-plot--stacked-container .js-style-receiver");
-                let hasStyles = 0;
-                conditionalStylesContainer.forEach(el => {
-                    if (el.style.backgroundColor !== '') {
-                        hasStyles++;
-                    }
-                });
-                expect(hasStyles).toBe(1);
-                done();
-            });
-        });
-
-        describe('limits', () => {
-
-            it('lines are not displayed by default', () => {
-                let limitEl = element.querySelectorAll(".js-limit-area hr");
-                expect(limitEl.length).toBe(0);
-            });
-
-            it('lines are displayed when configuration is set to true', (done) => {
-                config.series.models[0].set('limitLines', true);
-
-                Vue.nextTick(() => {
-                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
-                    expect(limitEl.length).toBe(4);
-                    done();
-                });
-
-            });
-        });
-    });
-
     describe('the inspector view', () => {
         let component;
         let viewComponentObject;
@@ -955,6 +606,7 @@ describe("the plugin", function () {
                 ]
             ];
 
+            openmct.router.path = [testTelemetryObject];
             mockComposition = new EventEmitter();
             mockComposition.load = () => {
                 mockComposition.emit('add', testTelemetryObject);
@@ -993,6 +645,10 @@ describe("the plugin", function () {
             });
         });
 
+        afterEach(() => {
+            openmct.router.path = null;
+        });
+
         describe('in view only mode', () => {
             let browseOptionsEl;
             let editOptionsEl;
@@ -1096,5 +752,24 @@ describe("the plugin", function () {
                 expect(colorSwatch).toBeDefined();
             });
         });
+
+        describe('limits', () => {
+
+            it('lines are not displayed by default', () => {
+                let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                expect(limitEl.length).toBe(0);
+            });
+
+            xit('lines are displayed when configuration is set to true', (done) => {
+                config.series.models[0].set('limitLines', true);
+
+                Vue.nextTick(() => {
+                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
+                    expect(limitEl.length).toBe(4);
+                    done();
+                });
+
+            });
+        });
     });
 });
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index 1d409d1990..da207d1500 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -21,21 +21,37 @@
 -->
 
 <template>
-<div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
+<div
+    v-if="loaded"
+    class="c-plot c-plot--stacked holder holder-plot has-control-bar"
+    :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
+>
+    <plot-legend
+        :cursor-locked="!!lockHighlightPoint"
+        :series="seriesModels"
+        :highlights="highlights"
+        :legend="legend"
+        @legendHoverChanged="legendHoverChanged"
+    />
     <div class="l-view-section">
         <stacked-plot-item
             v-for="object in compositionObjects"
             :key="object.id"
             class="c-plot--stacked-container"
-            :object="object"
+            :child-object="object"
             :options="options"
             :grid-lines="gridLines"
+            :color-palette="colorPalette"
             :cursor-guide="cursorGuide"
+            :show-limit-line-labels="showLimitLineLabels"
             :plot-tick-width="maxTickWidth"
             @plotTickWidth="onTickWidthChange"
             @loadingUpdated="loadingUpdated"
             @cursorGuide="onCursorGuideChange"
             @gridLines="onGridLinesChange"
+            @lockHighlightPoint="lockHighlightPointUpdated"
+            @highlights="highlightsUpdated"
+            @configLoaded="registerSeriesListeners"
         />
     </div>
 </div>
@@ -43,12 +59,19 @@
 
 <script>
 
+import PlotConfigurationModel from '../configuration/PlotConfigurationModel';
+import configStore from '../configuration/ConfigStore';
+import ColorPalette from "@/ui/color/ColorPalette";
+
+import PlotLegend from "../legend/PlotLegend.vue";
 import StackedPlotItem from './StackedPlotItem.vue';
 import ImageExporter from '../../../exporters/ImageExporter';
+import eventHelpers from "@/plugins/plot/lib/eventHelpers";
 
 export default {
     components: {
-        StackedPlotItem
+        StackedPlotItem,
+        PlotLegend
     },
     inject: ['openmct', 'domainObject', 'composition', 'path'],
     props: {
@@ -60,16 +83,35 @@ export default {
         }
     },
     data() {
+        this.seriesConfig = {};
+
         return {
             hideExportButtons: false,
             cursorGuide: false,
             gridLines: true,
             loading: false,
             compositionObjects: [],
-            tickWidthMap: {}
+            tickWidthMap: {},
+            legend: {},
+            loaded: false,
+            lockHighlightPoint: false,
+            highlights: [],
+            seriesModels: [],
+            showLimitLineLabels: undefined,
+            colorPalette: new ColorPalette()
         };
     },
     computed: {
+        plotLegendPositionClass() {
+            return `plot-legend-${this.config.legend.get('position')}`;
+        },
+        plotLegendExpandedStateClass() {
+            if (this.config.legend.get('expanded')) {
+                return 'plot-legend-expanded';
+            } else {
+                return 'plot-legend-collapsed';
+            }
+        },
         maxTickWidth() {
             return Math.max(...Object.values(this.tickWidthMap));
         }
@@ -78,6 +120,13 @@ export default {
         this.destroy();
     },
     mounted() {
+        eventHelpers.extend(this);
+
+        const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        this.config = this.getConfig(configId);
+        this.legend = this.config.legend;
+
+        this.loaded = true;
         this.imageExporter = new ImageExporter(this.openmct);
 
         this.composition.on('add', this.addChild);
@@ -86,10 +135,29 @@ export default {
         this.composition.load();
     },
     methods: {
+        getConfig(configId) {
+            let config = configStore.get(configId);
+            if (!config) {
+                config = new PlotConfigurationModel({
+                    id: configId,
+                    domainObject: this.domainObject,
+                    openmct: this.openmct,
+                    callback: (data) => {
+                        this.data = data;
+                    }
+                });
+                configStore.add(configId, config);
+            }
+
+            return config;
+        },
         loadingUpdated(loaded) {
             this.loading = loaded;
         },
         destroy() {
+            this.stopListening();
+            configStore.deleteStore(this.config.id);
+
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
             this.composition.off('reorder', this.compositionReorder);
@@ -99,6 +167,19 @@ export default {
             const id = this.openmct.objects.makeKeyString(child.identifier);
 
             this.$set(this.tickWidthMap, id, 0);
+            const persistedConfig = this.domainObject.configuration.series && this.domainObject.configuration.series.find((seriesConfig) => {
+                return this.openmct.objects.areIdsEqual(seriesConfig.identifier, child.identifier);
+            });
+            if (persistedConfig === undefined) {
+                this.openmct.objects.mutate(
+                    this.domainObject,
+                    'configuration.series[' + this.compositionObjects.length + ']',
+                    {
+                        identifier: child.identifier
+                    }
+                );
+            }
+
             this.compositionObjects.push(child);
         },
 
@@ -107,6 +188,13 @@ export default {
 
             this.$delete(this.tickWidthMap, id);
 
+            const configIndex = this.domainObject.configuration.series.findIndex((seriesConfig) => {
+                return this.openmct.objects.areIdsEqual(seriesConfig.identifier, childIdentifier);
+            });
+            if (configIndex > -1) {
+                this.domainObject.configuration.series.splice(configIndex, 1);
+            }
+
             const childObj = this.compositionObjects.filter((c) => {
                 const identifier = this.openmct.objects.makeKeyString(c.identifier);
 
@@ -158,6 +246,34 @@ export default {
 
             this.$set(this.tickWidthMap, plotId, width);
         },
+        legendHoverChanged(data) {
+            this.showLimitLineLabels = data;
+        },
+        lockHighlightPointUpdated(data) {
+            this.lockHighlightPoint = data;
+        },
+        highlightsUpdated(data) {
+            this.highlights = data;
+        },
+        registerSeriesListeners(configId) {
+            this.seriesConfig[configId] = this.getConfig(configId);
+            this.listenTo(this.seriesConfig[configId].series, 'add', this.addSeries, this);
+            this.listenTo(this.seriesConfig[configId].series, 'remove', this.removeSeries, this);
+
+            this.seriesConfig[configId].series.models.forEach(this.addSeries, this);
+        },
+        addSeries(series) {
+            const index = this.seriesModels.length;
+            this.$set(this.seriesModels, index, series);
+        },
+        removeSeries(plotSeries) {
+            const index = this.seriesModels.findIndex(seriesModel => this.openmct.objects.areIdsEqual(seriesModel.identifier, plotSeries.identifier));
+            if (index > -1) {
+                this.$delete(this.seriesModels, index);
+            }
+
+            this.stopListening(plotSeries);
+        },
         onCursorGuideChange(cursorGuide) {
             this.cursorGuide = cursorGuide === true;
         },
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index 15cb4b7b2d..50c17ca05f 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -27,12 +27,14 @@
 import MctPlot from '../MctPlot.vue';
 import Vue from "vue";
 import conditionalStylesMixin from "./mixins/objectStyles-mixin";
+import configStore from "@/plugins/plot/configuration/ConfigStore";
+import PlotConfigurationModel from "@/plugins/plot/configuration/PlotConfigurationModel";
 
 export default {
     mixins: [conditionalStylesMixin],
     inject: ['openmct', 'domainObject', 'path'],
     props: {
-        object: {
+        childObject: {
             type: Object,
             default() {
                 return {};
@@ -56,6 +58,18 @@ export default {
                 return true;
             }
         },
+        showLimitLineLabels: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        colorPalette: {
+            type: Object,
+            default() {
+                return undefined;
+            }
+        },
         plotTickWidth: {
             type: Number,
             default() {
@@ -72,12 +86,22 @@ export default {
         },
         plotTickWidth(width) {
             this.updateComponentProp('plotTickWidth', width);
+        },
+        showLimitLineLabels: {
+            handler(data) {
+                this.updateComponentProp('limitLineLabels', data);
+            },
+            deep: true
         }
     },
     mounted() {
         this.updateView();
     },
     beforeDestroy() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
+        }
+
         if (this.component) {
             this.component.$destroy();
         }
@@ -96,15 +120,19 @@ export default {
             }
 
             const onTickWidthChange = this.onTickWidthChange;
+            const onLockHighlightPointUpdated = this.onLockHighlightPointUpdated;
+            const onHighlightsUpdated = this.onHighlightsUpdated;
+            const onConfigLoaded = this.onConfigLoaded;
             const onCursorGuideChange = this.onCursorGuideChange;
             const onGridLinesChange = this.onGridLinesChange;
             const loadingUpdated = this.loadingUpdated;
             const setStatus = this.setStatus;
 
             const openmct = this.openmct;
-            const object = this.object;
             const path = this.path;
 
+            //If this object is not persistable, then package it with it's parent
+            const object = this.getPlotObject();
             const getProps = this.getProps;
             let viewContainer = document.createElement('div');
             this.$el.append(viewContainer);
@@ -123,14 +151,28 @@ export default {
                     return {
                         ...getProps(),
                         onTickWidthChange,
+                        onLockHighlightPointUpdated,
+                        onHighlightsUpdated,
+                        onConfigLoaded,
                         onCursorGuideChange,
                         onGridLinesChange,
                         loadingUpdated,
                         setStatus
                     };
                 },
-                template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\'}"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :init-grid-lines="gridLines" :init-cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :options="options" @plotTickWidth="onTickWidthChange" @cursorGuide="onCursorGuideChange" @gridLines="onGridLinesChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
+                template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\'}"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :init-grid-lines="gridLines" :init-cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :limit-line-labels="limitLineLabels" :color-palette="colorPalette" :options="options" @plotTickWidth="onTickWidthChange" @lockHighlightPoint="onLockHighlightPointUpdated" @highlights="onHighlightsUpdated" @configLoaded="onConfigLoaded" @cursorGuide="onCursorGuideChange" @gridLines="onGridLinesChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
             });
+
+            this.setSelection();
+        },
+        onLockHighlightPointUpdated() {
+            this.$emit('lockHighlightPoint', ...arguments);
+        },
+        onHighlightsUpdated() {
+            this.$emit('highlights', ...arguments);
+        },
+        onConfigLoaded() {
+            this.$emit('configLoaded', ...arguments);
         },
         onTickWidthChange() {
             this.$emit('plotTickWidth', ...arguments);
@@ -145,19 +187,73 @@ export default {
             this.status = status;
             this.updateComponentProp('status', status);
         },
+        setSelection() {
+            let childContext = {};
+            childContext.item = this.childObject;
+            this.context = childContext;
+            if (this.removeSelectable) {
+                this.removeSelectable();
+            }
+
+            this.removeSelectable = this.openmct.selection.selectable(
+                this.$el, this.context);
+        },
         loadingUpdated(loaded) {
             this.loading = loaded;
             this.updateComponentProp('loading', loaded);
         },
         getProps() {
             return {
+                limitLineLabels: this.showLimitLineLabels,
                 gridLines: this.gridLines,
                 cursorGuide: this.cursorGuide,
                 plotTickWidth: this.plotTickWidth,
                 loading: this.loading,
                 options: this.options,
-                status: this.status
+                status: this.status,
+                colorPalette: this.colorPalette
             };
+        },
+        getPlotObject() {
+            if (this.childObject.configuration && this.childObject.configuration.series) {
+                //If the object has a configuration, allow initialization of the config from it's persisted config
+                return this.childObject;
+            } else {
+                // If the object does not have configuration, initialize the series config with the persisted config from the stacked plot
+                const configId = this.openmct.objects.makeKeyString(this.childObject.identifier);
+                let config = configStore.get(configId);
+                if (!config) {
+                    const persistedConfig = this.domainObject.configuration.series.find((seriesConfig) => {
+                        return this.openmct.objects.areIdsEqual(seriesConfig.identifier, this.childObject.identifier);
+                    });
+                    if (persistedConfig) {
+                        config = new PlotConfigurationModel({
+                            id: configId,
+                            domainObject: {
+                                ...this.childObject,
+                                configuration: {
+                                    series: [
+                                        {
+                                            identifier: this.childObject.identifier,
+                                            ...persistedConfig.series
+                                        }
+                                    ],
+                                    yAxis: persistedConfig.yAxis
+
+                                }
+                            },
+                            openmct: this.openmct,
+                            palette: this.colorPalette,
+                            callback: (data) => {
+                                this.data = data;
+                            }
+                        });
+                        configStore.add(configId, config);
+                    }
+                }
+
+                return this.childObject;
+            }
         }
     }
 };
diff --git a/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
index 1c2ee7b536..37398c43c3 100644
--- a/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
+++ b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
@@ -31,7 +31,7 @@ export default {
         };
     },
     mounted() {
-        this.objectStyles = this.getObjectStyleForItem(this.object.configuration);
+        this.objectStyles = this.getObjectStyleForItem(this.childObject.configuration);
         this.initObjectStyles();
     },
     beforeDestroy() {
@@ -62,18 +62,18 @@ export default {
                 this.stopListeningStyles();
             }
 
-            this.stopListeningStyles = this.openmct.objects.observe(this.object, 'configuration.objectStyles', (newObjectStyle) => {
+            this.stopListeningStyles = this.openmct.objects.observe(this.childObject, 'configuration.objectStyles', (newObjectStyle) => {
                 //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
                 this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
             });
 
-            if (this.object && this.object.configuration && this.object.configuration.fontStyle) {
-                const { fontSize, font } = this.object.configuration.fontStyle;
+            if (this.childObject && this.childObject.configuration && this.childObject.configuration.fontStyle) {
+                const { fontSize, font } = this.childObject.configuration.fontStyle;
                 this.setFontSize(fontSize);
                 this.setFont(font);
             }
 
-            this.stopListeningFontStyles = this.openmct.objects.observe(this.object, 'configuration.fontStyle', (newFontStyle) => {
+            this.stopListeningFontStyles = this.openmct.objects.observe(this.childObject, 'configuration.fontStyle', (newFontStyle) => {
                 this.setFontSize(newFontStyle.fontSize);
                 this.setFont(newFontStyle.font);
             });
diff --git a/src/plugins/plot/stackedPlot/pluginSpec.js b/src/plugins/plot/stackedPlot/pluginSpec.js
new file mode 100644
index 0000000000..8e4fdf91a6
--- /dev/null
+++ b/src/plugins/plot/stackedPlot/pluginSpec.js
@@ -0,0 +1,771 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {createMouseEvent, createOpenMct, resetApplicationState, spyOnBuiltins} from "utils/testing";
+import PlotVuePlugin from "../plugin";
+import Vue from "vue";
+import StackedPlot from "./StackedPlot.vue";
+import configStore from "../configuration/ConfigStore";
+import EventEmitter from "EventEmitter";
+import PlotConfigurationModel from "../configuration/PlotConfigurationModel";
+import PlotOptions from "../inspector/PlotOptions.vue";
+
+describe("the plugin", function () {
+    let element;
+    let child;
+    let openmct;
+    let telemetryPromise;
+    let telemetryPromiseResolve;
+    let mockObjectPath;
+    let stackedPlotObject = {
+        identifier: {
+            namespace: "",
+            key: "test-plot"
+        },
+        type: "telemetry.plot.stacked",
+        name: "Test Stacked Plot",
+        configuration: {
+            series: []
+        }
+    };
+
+    beforeEach((done) => {
+        mockObjectPath = [
+            {
+                name: 'mock folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            },
+            {
+                name: 'mock parent folder',
+                type: 'time-strip',
+                identifier: {
+                    key: 'mock-parent-folder',
+                    namespace: ''
+                }
+            }
+        ];
+        const testTelemetry = [
+            {
+                'utc': 1,
+                'some-key': 'some-value 1',
+                'some-other-key': 'some-other-value 1'
+            },
+            {
+                'utc': 2,
+                'some-key': 'some-value 2',
+                'some-other-key': 'some-other-value 2'
+            },
+            {
+                'utc': 3,
+                'some-key': 'some-value 3',
+                'some-other-key': 'some-other-value 3'
+            }
+        ];
+
+        const timeSystem = {
+            timeSystemKey: 'utc',
+            bounds: {
+                start: 0,
+                end: 4
+            }
+        };
+
+        openmct = createOpenMct(timeSystem);
+
+        telemetryPromise = new Promise((resolve) => {
+            telemetryPromiseResolve = resolve;
+        });
+
+        spyOn(openmct.telemetry, 'request').and.callFake(() => {
+            telemetryPromiseResolve(testTelemetry);
+
+            return telemetryPromise;
+        });
+
+        openmct.install(new PlotVuePlugin());
+
+        element = document.createElement("div");
+        element.style.width = "640px";
+        element.style.height = "480px";
+        child = document.createElement("div");
+        child.style.width = "640px";
+        child.style.height = "480px";
+        element.appendChild(child);
+        document.body.appendChild(element);
+
+        spyOn(window, 'ResizeObserver').and.returnValue({
+            observe() {},
+            unobserve() {},
+            disconnect() {}
+        });
+
+        openmct.types.addType("test-object", {
+            creatable: true
+        });
+
+        spyOnBuiltins(["requestAnimationFrame"]);
+        window.requestAnimationFrame.and.callFake((callBack) => {
+            callBack();
+        });
+
+        openmct.router.path = [stackedPlotObject];
+        openmct.on("start", done);
+        openmct.startHeadless();
+    });
+
+    afterEach((done) => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
+        });
+        configStore.deleteAll();
+        resetApplicationState(openmct).then(done).catch(done);
+    });
+
+    afterAll(() => {
+        openmct.router.path = null;
+    });
+
+    describe("the plot views", () => {
+        it("provides a stacked plot view for objects with telemetry", () => {
+            const testTelemetryObject = {
+                id: "test-object",
+                type: "telemetry.plot.stacked",
+                telemetry: {
+                    values: [{
+                        key: "some-key"
+                    }]
+                }
+            };
+
+            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+            let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-stacked");
+            expect(plotView).toBeDefined();
+        });
+
+    });
+
+    describe("The stacked plot view", () => {
+        let testTelemetryObject;
+        let testTelemetryObject2;
+        let config;
+        let component;
+        let mockComposition;
+        let plotViewComponentObject;
+
+        afterAll(() => {
+            openmct.router.path = null;
+        });
+
+        beforeEach(() => {
+            testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                },
+                configuration: {
+                    objectStyles: {
+                        staticStyle: {
+                            style: {
+                                backgroundColor: 'rgb(0, 200, 0)',
+                                color: '',
+                                border: ''
+                            }
+                        },
+                        conditionSetIdentifier: {
+                            namespace: '',
+                            key: 'testConditionSetId'
+                        },
+                        selectedConditionId: 'conditionId1',
+                        defaultConditionId: 'conditionId1',
+                        styles: [
+                            {
+                                conditionId: 'conditionId1',
+                                style: {
+                                    backgroundColor: 'rgb(0, 155, 0)',
+                                    color: '',
+                                    output: '',
+                                    border: ''
+                                }
+                            }
+                        ]
+                    }
+                }
+            };
+
+            testTelemetryObject2 = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object2"
+                },
+                type: "test-object",
+                name: "Test Object2",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key2",
+                        name: "Some attribute2",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key2",
+                        name: "Another attribute2",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testTelemetryObject);
+
+                return [testTelemetryObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            let viewContainer = document.createElement("div");
+            child.append(viewContainer);
+            component = new Vue({
+                el: viewContainer,
+                components: {
+                    StackedPlot
+                },
+                provide: {
+                    openmct: openmct,
+                    domainObject: stackedPlotObject,
+                    composition: openmct.composition.get(stackedPlotObject),
+                    path: [stackedPlotObject]
+                },
+                template: "<stacked-plot></stacked-plot>"
+            });
+
+            return telemetryPromise
+                .then(Vue.nextTick())
+                .then(() => {
+                    plotViewComponentObject = component.$root.$children[0];
+                    const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+                    config = configStore.get(configId);
+                });
+        });
+
+        it("Renders a collapsed legend for every telemetry", () => {
+            let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
+            expect(legend.length).toBe(1);
+            expect(legend[0].innerHTML).toEqual("Test Object");
+        });
+
+        it("Renders an expanded legend for every telemetry", () => {
+            let legendControl = element.querySelector(".c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle");
+            const clickEvent = createMouseEvent("click");
+
+            legendControl.dispatchEvent(clickEvent);
+
+            let legend = element.querySelectorAll(".plot-wrapper-expanded-legend .plot-legend-item td");
+            expect(legend.length).toBe(6);
+        });
+
+        it("Renders X-axis ticks for the telemetry object", (done) => {
+            let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
+            expect(xAxisElement.length).toBe(1);
+
+            config.xAxis.set('displayRange', {
+                min: 0,
+                max: 4
+            });
+
+            Vue.nextTick(() => {
+                let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
+                expect(ticks.length).toBe(9);
+
+                done();
+            });
+        });
+
+        it("Renders Y-axis ticks for the telemetry object", (done) => {
+            config.yAxis.set('displayRange', {
+                min: 10,
+                max: 20
+            });
+            Vue.nextTick(() => {
+                let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper");
+                expect(yAxisElement.length).toBe(1);
+                let ticks = yAxisElement[0].querySelectorAll(".gl-plot-tick");
+                expect(ticks.length).toBe(6);
+                done();
+            });
+        });
+
+        it("Renders Y-axis options for the telemetry object", () => {
+            let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select");
+            expect(yAxisElement.length).toBe(1);
+            let options = yAxisElement[0].querySelectorAll("option");
+            expect(options.length).toBe(2);
+            expect(options[0].value).toBe("Some attribute");
+            expect(options[1].value).toBe("Another attribute");
+        });
+
+        it("turns on cursor Guides all telemetry objects", (done) => {
+            expect(plotViewComponentObject.cursorGuide).toBeFalse();
+            plotViewComponentObject.cursorGuide = true;
+            Vue.nextTick(() => {
+                let childCursorGuides = element.querySelectorAll(".c-cursor-guide--v");
+                expect(childCursorGuides.length).toBe(1);
+                done();
+            });
+        });
+
+        it("shows grid lines for all telemetry objects", () => {
+            expect(plotViewComponentObject.gridLines).toBeTrue();
+            let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
+            let visible = 0;
+            gridLinesContainer.forEach(el => {
+                if (el.style.display !== "none") {
+                    visible++;
+                }
+            });
+            expect(visible).toBe(2);
+        });
+
+        it("hides grid lines for all telemetry objects", (done) => {
+            expect(plotViewComponentObject.gridLines).toBeTrue();
+            plotViewComponentObject.gridLines = false;
+            Vue.nextTick(() => {
+                expect(plotViewComponentObject.gridLines).toBeFalse();
+                let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
+                let visible = 0;
+                gridLinesContainer.forEach(el => {
+                    if (el.style.display !== "none") {
+                        visible++;
+                    }
+                });
+                expect(visible).toBe(0);
+                done();
+            });
+        });
+
+        it('plots a new series when a new telemetry object is added', (done) => {
+            mockComposition.emit('add', testTelemetryObject2);
+            Vue.nextTick(() => {
+                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
+                expect(legend.length).toBe(2);
+                expect(legend[1].innerHTML).toEqual("Test Object2");
+                done();
+            });
+        });
+
+        it('removes plots from series when a telemetry object is removed', (done) => {
+            mockComposition.emit('remove', testTelemetryObject.identifier);
+            Vue.nextTick(() => {
+                expect(plotViewComponentObject.compositionObjects.length).toBe(0);
+                done();
+            });
+        });
+
+        it("Changes the label of the y axis when the option changes", (done) => {
+            let selectEl = element.querySelector('.gl-plot-y-label__select');
+            selectEl.value = 'Another attribute';
+            selectEl.dispatchEvent(new Event("change"));
+
+            Vue.nextTick(() => {
+                expect(config.yAxis.get('label')).toEqual('Another attribute');
+                done();
+            });
+        });
+
+        it("Renders a new series when added to one of the plots", (done) => {
+            mockComposition.emit('add', testTelemetryObject2);
+            Vue.nextTick(() => {
+                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
+                expect(legend.length).toBe(2);
+                expect(legend[1].innerHTML).toEqual("Test Object2");
+                done();
+            });
+        });
+
+        it("Adds a new point to the plot", (done) => {
+            let originalLength = config.series.models[0].getSeriesData().length;
+            config.series.models[0].add({
+                utc: 2,
+                'some-key': 1,
+                'some-other-key': 2
+            });
+            Vue.nextTick(() => {
+                const seriesData = config.series.models[0].getSeriesData();
+                expect(seriesData.length).toEqual(originalLength + 1);
+                done();
+            });
+        });
+
+        it("updates the xscale", (done) => {
+            config.xAxis.set('displayRange', {
+                min: 0,
+                max: 10
+            });
+            Vue.nextTick(() => {
+                expect(plotViewComponentObject.$children[1].component.$children[0].xScale.domain()).toEqual({
+                    min: 0,
+                    max: 10
+                });
+                done();
+            });
+        });
+
+        it("updates the yscale", (done) => {
+            config.yAxis.set('displayRange', {
+                min: 10,
+                max: 20
+            });
+            Vue.nextTick(() => {
+                expect(plotViewComponentObject.$children[1].component.$children[0].yScale.domain()).toEqual({
+                    min: 10,
+                    max: 20
+                });
+                done();
+            });
+        });
+
+        it("shows styles for telemetry objects if available", (done) => {
+            Vue.nextTick(() => {
+                let conditionalStylesContainer = element.querySelectorAll(".c-plot--stacked-container .js-style-receiver");
+                let hasStyles = 0;
+                conditionalStylesContainer.forEach(el => {
+                    if (el.style.backgroundColor !== '') {
+                        hasStyles++;
+                    }
+                });
+                expect(hasStyles).toBe(1);
+                done();
+            });
+        });
+    });
+
+    describe('the stacked plot inspector view', () => {
+        let component;
+        let viewComponentObject;
+        let mockComposition;
+        let testTelemetryObject;
+        let selection;
+        let config;
+        beforeEach((done) => {
+            testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            selection = [
+                [
+                    {
+                        context: {
+                            item: {
+                                type: 'telemetry.plot.stacked',
+                                identifier: {
+                                    key: 'some-stacked-plot',
+                                    namespace: ''
+                                },
+                                configuration: {
+                                    series: []
+                                }
+                            }
+                        }
+                    }
+                ]
+            ];
+
+            openmct.router.path = [testTelemetryObject];
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testTelemetryObject);
+
+                return [testTelemetryObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+            config = new PlotConfigurationModel({
+                id: configId,
+                domainObject: selection[0][0].context.item,
+                openmct: openmct
+            });
+            configStore.add(configId, config);
+
+            let viewContainer = document.createElement('div');
+            child.append(viewContainer);
+            component = new Vue({
+                el: viewContainer,
+                components: {
+                    PlotOptions
+                },
+                provide: {
+                    openmct: openmct,
+                    domainObject: selection[0][0].context.item,
+                    path: [selection[0][0].context.item]
+                },
+                template: '<plot-options/>'
+            });
+
+            Vue.nextTick(() => {
+                viewComponentObject = component.$root.$children[0];
+                done();
+            });
+        });
+
+        afterEach(() => {
+            openmct.router.path = null;
+        });
+
+        describe('in view only mode', () => {
+            let browseOptionsEl;
+            beforeEach(() => {
+                browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+            });
+
+            it('shows legend properties', () => {
+                const legendPropertiesEl = browseOptionsEl.querySelector('.js-legend-properties');
+                expect(legendPropertiesEl).not.toBeNull();
+            });
+
+            it('does not show series properties', () => {
+                const seriesPropertiesEl = browseOptionsEl.querySelector('.c-tree');
+                expect(seriesPropertiesEl).toBeNull();
+            });
+
+            it('does not show yaxis properties', () => {
+                const yAxisPropertiesEl = browseOptionsEl.querySelector('.js-yaxis-properties');
+                expect(yAxisPropertiesEl).toBeNull();
+            });
+        });
+
+    });
+
+    describe('inspector view of stacked plot child', () => {
+        let component;
+        let viewComponentObject;
+        let mockComposition;
+        let testTelemetryObject;
+        let selection;
+        let config;
+        beforeEach((done) => {
+            testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            selection = [
+                [
+                    {
+                        context: {
+                            item: {
+                                id: "test-object",
+                                identifier: {
+                                    key: "test-object",
+                                    namespace: ''
+                                },
+                                type: "telemetry.plot.overlay",
+                                configuration: {
+                                    series: [
+                                        {
+                                            identifier: {
+                                                key: "test-object",
+                                                namespace: ''
+                                            }
+                                        }
+                                    ]
+                                },
+                                composition: []
+                            }
+                        }
+                    },
+                    {
+                        context: {
+                            item: {
+                                type: 'telemetry.plot.stacked',
+                                identifier: {
+                                    key: 'some-stacked-plot',
+                                    namespace: ''
+                                },
+                                configuration: {
+                                    series: []
+                                }
+                            }
+                        }
+                    }
+                ]
+            ];
+
+            openmct.router.path = [testTelemetryObject];
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testTelemetryObject);
+
+                return [testTelemetryObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+            config = new PlotConfigurationModel({
+                id: configId,
+                domainObject: selection[0][0].context.item,
+                openmct: openmct
+            });
+            configStore.add(configId, config);
+
+            let viewContainer = document.createElement('div');
+            child.append(viewContainer);
+            component = new Vue({
+                el: viewContainer,
+                components: {
+                    PlotOptions
+                },
+                provide: {
+                    openmct: openmct,
+                    domainObject: selection[0][0].context.item,
+                    path: [selection[0][0].context.item, selection[0][1].context.item]
+                },
+                template: '<plot-options/>'
+            });
+
+            Vue.nextTick(() => {
+                viewComponentObject = component.$root.$children[0];
+                done();
+            });
+        });
+
+        afterEach(() => {
+            openmct.router.path = null;
+        });
+
+        describe('in view only mode', () => {
+            let browseOptionsEl;
+            beforeEach(() => {
+                browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+            });
+
+            it('hides legend properties', () => {
+                const legendPropertiesEl = browseOptionsEl.querySelector('.js-legend-properties');
+                expect(legendPropertiesEl).toBeNull();
+            });
+
+            it('shows series properties', () => {
+                const seriesPropertiesEl = browseOptionsEl.querySelector('.c-tree');
+                expect(seriesPropertiesEl).not.toBeNull();
+            });
+
+            it('shows yaxis properties', () => {
+                const yAxisPropertiesEl = browseOptionsEl.querySelector('.js-yaxis-properties');
+                expect(yAxisPropertiesEl).not.toBeNull();
+            });
+        });
+
+    });
+});
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index c8745b90a9..684a3a7fec 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -164,7 +164,7 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -178,11 +178,10 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorSelected: #ffefc2; // Border of selected frames while editing
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
-$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
 $editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
@@ -191,6 +190,7 @@ $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); //
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index 83300ab51d..9077592ea2 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -168,7 +168,7 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -182,11 +182,10 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorSelected: #ffefc2; // Border of selected frames while editing
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
-$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
 $editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
@@ -195,6 +194,7 @@ $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); //
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index 48a0865d21..1e88d4928a 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -178,11 +178,10 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #333; // Border of selected frames
+$editFrameColorSelected: #ff7c00; // Border of selected frames
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
-$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
 $editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
@@ -191,6 +190,7 @@ $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); //
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: 1px dashed $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index b9ae1b6d9b..a5faf3ec53 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -65,7 +65,6 @@ mct-plot {
 .c-plot {
     @include abs($mainViewPad);
     display: flex;
-    flex-direction: column;
     overflow: hidden;
     min-height: $plotMinH;
 
@@ -83,11 +82,18 @@ mct-plot {
     }
 
     .c-plot--stacked-container {
+        border: 1px solid transparent;
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
         min-height: $plotMinH;
         overflow: hidden;
+
+        &[s-selected] {
+            .is-editing & {
+                border: $editMarqueeBorder;
+            }
+        }
     }
 ;