diff --git a/ChartsSpace/PlottersManager.js b/ChartsSpace/PlottersManager.js
index bd50cd28f..3443832e1 100644
--- a/ChartsSpace/PlottersManager.js
+++ b/ChartsSpace/PlottersManager.js
@@ -201,6 +201,7 @@ function newPlottersManager () {
                             /* Lets load now this plotter panels. */
               productPlotter.panels = []
 
+              /* Here is where we instantiate the legacy panels */
               for (let i = 0; i < pProductCard.product.plotter.module.panels.length; i++) {
                 let panelConfig = pProductCard.product.plotter.module.panels[i]
 
@@ -220,6 +221,27 @@ function newPlottersManager () {
                 productPlotter.panels.push(plotterPanelHandle)
               }
 
+              /* Here we instantiate the UI Defined Panels. */
+              if (productDefinition !== undefined) {
+                for (let i = 0; i < productDefinition.referenceParent.panels.length; i++) {
+                  let panel = productDefinition.referenceParent.panels[i]
+
+                  let parameters = {
+                    devTeam: pProductCard.product.plotter.devTeam,
+                    plotterCodeName: pProductCard.product.plotter.codeName,
+                    moduleCodeName: pProductCard.product.plotter.moduleName,
+                    panelCodeName: panel.id
+                  }
+                  let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
+                  let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner, pProductCard.session, panel)
+                  let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner)
+
+                  /* Connect Panel to the Plotter via an Event. */
+                  productPlotter.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
+                  productPlotter.panels.push(plotterPanelHandle)
+                }
+              }
+
               productPlotters.push(productPlotter)
               callBack(GLOBAL.DEFAULT_OK_RESPONSE)
             } catch (err) {
diff --git a/Panels/PlotterPanel.js b/Panels/PlotterPanel.js
new file mode 100644
index 000000000..abe7f0dee
--- /dev/null
+++ b/Panels/PlotterPanel.js
@@ -0,0 +1,122 @@
+
+function newPlotterPanel () {
+  const MODULE_NAME = 'Plotter Panel'
+  const ERROR_LOG = true
+  const INTENSIVE_LOG = false
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    fitFunction: undefined,
+    onRecordChange: onRecordChange,
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let container = newContainer()
+  container.initialize()
+  thisObject.container = container
+
+  container.frame.containerName = 'Plotter Panel'
+
+  let currentRecord
+  let panelTabButton
+  let panelNode
+
+  return thisObject
+
+  function initialize (pPanelNode) {
+    panelNode = pPanelNode
+    container.frame.containerName = panelNode.name
+
+    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+    thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
+
+    thisObject.container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5
+    thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height
+
+    panelTabButton = newPanelTabButton()
+    panelTabButton.parentContainer = thisObject.container
+    panelTabButton.container.frame.parentFrame = thisObject.container.frame
+    panelTabButton.fitFunction = thisObject.fitFunction
+    panelTabButton.initialize()
+  }
+
+  function getContainer (point) {
+    let container
+
+    container = panelTabButton.getContainer(point)
+    if (container !== undefined) { return container }
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      let checkPoint = {
+        x: point.x,
+        y: point.y
+      }
+
+      checkPoint = thisObject.fitFunction(checkPoint)
+
+      if (point.x === checkPoint.x && point.y === checkPoint.y) {
+        return thisObject.container
+      }
+    }
+  }
+
+  function onRecordChange (pCurrentRecord) {
+    currentRecord = pCurrentRecord
+  }
+
+  function draw () {
+    thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
+
+    plotCurrentRecordData()
+
+    panelTabButton.draw()
+  }
+
+  function plotCurrentRecordData () {
+    const frameBodyHeight = thisObject.container.frame.getBodyHeight()
+    const frameTitleHeight = thisObject.container.frame.height - frameBodyHeight
+
+    const X_AXIS = thisObject.container.frame.width / 2
+    const Y_AXIS = frameTitleHeight + frameBodyHeight / 2
+    const PANEL_HEIGHT = frameTitleHeight + frameBodyHeight
+
+    if (currentRecord === undefined) { return }
+    if (currentRecord.data === undefined) { return }
+
+    try {
+      eval(panelNode.code.code)
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+    }
+
+    function printLabel (labelToPrint, x, y, opacity) {
+      let labelPoint
+      let fontSize = 10
+
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
+
+      let label = '' + labelToPrint
+
+      let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+      labelPoint = {
+        x: x - xOffset,
+        y: y
+      }
+
+      labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+      labelPoint = thisObject.fitFunction(labelPoint)
+
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
+      browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+    }
+
+    browserCanvasContext.closePath()
+    browserCanvasContext.fill()
+  }
+}
+
diff --git a/Plotter.js b/Plotter.js
index 6259c3d3d..28dd82efd 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -443,7 +443,7 @@ function newPlotter () {
 
       /* Clean the pannel at places where there is no record. */
       let currentRecord = {
-        innerChannel: undefined
+        data: undefined
       }
       thisObject.container.eventHandler.raiseEvent('Current Record Changed', currentRecord)
 
@@ -475,7 +475,7 @@ function newPlotter () {
           atMousePosition = true
 
           let currentRecord = {
-            innerChannel: record
+            data: record
           }
           thisObject.container.eventHandler.raiseEvent('Current Record Changed', currentRecord)
         }
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index 34f3d6c13..b67add293 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -35,7 +35,7 @@ function newPanelsSpace () {
 
   }
 
-  function createNewPanel (pType, pParameters, pOwner, pSession) {
+  function createNewPanel (pType, pParameters, pOwner, pSession, pPanelCode) {
     let panel
 
     switch (pType) {
@@ -56,11 +56,20 @@ function newPanelsSpace () {
         }
       case 'Plotter Panel':
         {
-          panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName)
-          panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
-          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
-          panel.session = pSession
-          panel.initialize()
+          if (pPanelCode !== undefined) {
+            panel = newPlotterPanel()
+            panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.session = pSession
+            panel.initialize(pPanelCode)
+          } else {
+            panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName)
+            panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.session = pSession
+            panel.initialize()
+          }
+
           break
         }
     }