diff --git a/include/ignition/gui/qml/GzPlotIcon.qml b/include/ignition/gui/qml/GzPlotIcon.qml
new file mode 100644
index 000000000..3167d20ae
--- /dev/null
+++ b/include/ignition/gui/qml/GzPlotIcon.qml
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2022 Open Source Robotics Foundation
+ *
+ * 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.
+ *
+*/
+import QtQuick 2.9
+
+/**
+ * Item for a draggable plotting icon
+ *
+ * User Example:
+ * Item {
+ *   Component {
+ *     id: gzploticon
+ *     GzPlotIcon {}
+ *   }
+ *
+ *   Rectangle {
+ *     Loader {
+ *       id: plotLoader
+ *       sourceComponent: gzploticon
+ *     }
+ *     Component.onCompleted: {
+ *       plotLoader.item.gzMimeData = {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",x," + typeNameFromCpp} 
+ *     }
+ *   }
+ * }
+ *
+ */
+Rectangle {
+  /**
+   * Used to transfer data, where data is separated by ','.
+   * For components, the syntax needs to be:
+   *   `{"text/plain" : "Component," + <entity> + "," + <typeId> + "," + <attribute> + "," + <typeName>}`.
+   * For transport topics: `{"text/plain" : <topic> + "," + <fieldPath>}`.
+   * See, Chart.qml and PlottingInterface.hh/.cc for more details.
+  **/
+  property var gzMimeData
+  y: 10
+  height: 40
+  width: 20
+  color: "transparent"
+
+  Image {
+    source: "images/plottable_icon.svg"
+    anchors.top: parent.top
+    anchors.left: parent.left
+    width: 20
+    height: 20
+    Drag.mimeData: gzMimeData
+    Drag.dragType: Drag.Automatic
+    Drag.supportedActions : Qt.CopyAction
+    Drag.active: gzDragMouse.drag.active
+    // a point to drag from
+    Drag.hotSpot.x: 0
+    Drag.hotSpot.y: y
+    MouseArea {
+      id: gzDragMouse
+      anchors.fill: parent
+      drag.target: parent
+      onPressed: {
+        parent.grabToImage(function(result) {parent.Drag.imageSource = result.url })
+      }
+      onReleased: parent.Drag.drop();
+      cursorShape: Qt.DragCopyCursor
+    }
+  }
+}
diff --git a/include/ignition/gui/qml/GzPose.qml b/include/ignition/gui/qml/GzPose.qml
index d863e6bfc..8f0567324 100644
--- a/include/ignition/gui/qml/GzPose.qml
+++ b/include/ignition/gui/qml/GzPose.qml
@@ -27,6 +27,9 @@ import QtQuick.Controls.Styles 1.4
  *  If readOnly == False,
  *  users can read from signal parameters of gzPoseSet: _x, _y, etc.
  *
+ *  To enable plotting, set gzPlotEnabled = true.
+ *  If true, gzPlotMimeData* is required.
+ *
  *  Usage example:
  *  GzPose {
  *    id: gzPose
@@ -37,6 +40,13 @@ import QtQuick.Controls.Styles 1.4
  *    rollValue: rollValueFromCPP
  *    pitchValue: pitchValueFromCPP
  *    yawValue: yawValueFromCPP
+ *    gzPlotEnabled: true
+ *    gzPlotMimeDataX: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",x," + typeNameFromCpp}
+ *    gzPlotMimeDataY: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",y," + typeNameFromCpp}
+ *    gzPlotMimeDataZ: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",z," + typeNameFromCpp}
+ *    gzPlotMimeDataRoll: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",roll," + typeNameFromCpp}
+ *    gzPlotMimeDataPitch:{"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",pitch," + typeNameFromCpp}
+ *    gzPlotMimeDataYaw: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",yaw," + typeNameFromCpp}
  *    onGzPoseSet: {
  *      myFunc(_x, _y, _z, _roll, _pitch, _yaw)
  *    }
@@ -72,6 +82,16 @@ Item {
   // Expand/Collapse of this widget
   property bool expand: true
 
+  // Display/Hide plotting icons
+  property bool gzPlotEnabled: false
+
+  // Data for plotting, see GzPlotIcon.qml for more details
+  property var gzPlotMimeDataX: {"text/plain" : ""}
+  property var gzPlotMimeDataY: {"text/plain" : ""}
+  property var gzPlotMimeDataZ: {"text/plain" : ""}
+  property var gzPlotMimeDataRoll: {"text/plain" : ""}
+  property var gzPlotMimeDataPitch: {"text/plain" : ""}
+  property var gzPlotMimeDataYaw: {"text/plain" : ""}
 
   /*** The following are private variables: ***/
   height: gzPoseContent.height
@@ -102,7 +122,8 @@ Item {
       maximumValue: spinMax
       decimals: gzHelper.getDecimals(writableSpin.width)
       onEditingFinished: {
-        gzPoseRoot.gzPoseSet(xItem.value, yItem.value, zItem.value, rollItem.value, pitchItem.value, yawItem.value)
+        gzPoseRoot.gzPoseSet(xItem.value, yItem.value, zItem.value,
+                             rollItem.value, pitchItem.value, yawItem.value)
       }
     }
   }
@@ -124,6 +145,16 @@ Item {
     }
   }
 
+  /**
+   * Used to create a plotting icon
+   */
+  Component {
+    id: gzPlotIcon
+    GzPlotIcon {
+      gzMimeData: gzLoaderMimeData
+    }
+  }
+
   Rectangle {
     id: gzPoseContent
     width: parent.width
@@ -143,11 +174,25 @@ Item {
       width: parent.width
       columns: 4
 
-      Text {
-        text: 'X (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: xText.width + 40
+        Loader {
+          id: xPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataX
+        }
+
+        Text {
+          id: xText
+          text: 'X (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -164,11 +209,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Roll (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: rollText.width + 40
+        Loader {
+          id: rollPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataRoll
+        }
+
+        Text {
+          id: rollText
+          text: 'Roll (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -185,11 +244,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Y (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: yText.width + 40
+        Loader {
+          id: yPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataY
+        }
+
+        Text {
+          id: yText
+          text: 'Y (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -206,11 +279,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Pitch (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+       Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: pitchText.width + 40
+        Loader {
+          id: pitchPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataPitch
+        }
+
+        Text {
+          id: pitchText
+          text: 'Pitch (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -227,11 +314,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Z (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: zText.width + 40
+        Loader {
+          id: zPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataZ
+        }
+
+        Text {
+          id: zText
+          text: 'Z (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -248,11 +349,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Yaw (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: yawText.width + 40
+        Loader {
+          id: yawPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          property var gzLoaderMimeData: gzPlotMimeDataYaw
+        }
+
+        Text {
+          id: yawText
+          text: 'Yaw (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
diff --git a/include/ignition/gui/qml/images/plottable_icon.svg b/include/ignition/gui/qml/images/plottable_icon.svg
new file mode 100644
index 000000000..bcac9afc2
--- /dev/null
+++ b/include/ignition/gui/qml/images/plottable_icon.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="graph_line.svg">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1280"
+     inkscape:window-height="1548"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="6.9532167"
+     inkscape:cx="31.952539"
+     inkscape:cy="25.346459"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4">
+    <path
+       id="a"
+       d="M 0,0 H 24 V 24 H 0 V 0 z"
+       inkscape:connector-curvature="0" />
+  </defs>
+  <g
+     id="g2990"
+     transform="translate(-89.559323,-14.779661)">
+    <path
+       transform="matrix(1.002409,0,0,1.002409,60.34193,-15.438496)"
+       d="m 92.993372,62.068634 a 31.923098,31.923098 0 1 1 -63.846195,0 31.923098,31.923098 0 1 1 63.846195,0 z"
+       sodipodi:ry="31.923098"
+       sodipodi:rx="31.923098"
+       sodipodi:cy="62.068634"
+       sodipodi:cx="61.070274"
+       id="path3811"
+       style="fill:#4d4d4d;fill-opacity:1;stroke:none"
+       sodipodi:type="arc" />
+  </g>
+  <path
+     clip-path="none"
+     d="m 56.518923,23.084028 c 0,2.451892 -2.006094,4.457985 -4.457986,4.457985 -0.401219,0 -0.780148,-0.04458 -1.136789,-0.156029 l -7.935215,7.912925 c 0.11145,0.35664 0.15603,0.757858 0.15603,1.159076 0,2.451892 -2.006094,4.457986 -4.457986,4.457986 -2.451892,0 -4.457986,-2.006094 -4.457986,-4.457986 0,-0.401218 0.04458,-0.802436 0.15603,-1.159076 l -5.683932,-5.683931 c -0.356639,0.11145 -0.757858,0.156029 -1.159077,0.156029 -0.401219,0 -0.802437,-0.04458 -1.159076,-0.156029 L 16.241019,39.779185 c 0.111449,0.356639 0.156029,0.735567 0.156029,1.136786 0,2.451892 -2.006094,4.457986 -4.457986,4.457986 -2.4518916,0 -4.4579854,-2.006094 -4.4579854,-4.457986 0,-2.451892 2.0060938,-4.457986 4.4579854,-4.457986 0.401219,0 0.780148,0.04458 1.136787,0.15603 L 23.240056,26.472097 c -0.11145,-0.356639 -0.15603,-0.757857 -0.15603,-1.159077 0,-2.451892 2.006094,-4.457985 4.457986,-4.457985 2.451892,0 4.457986,2.006093 4.457986,4.457985 0,0.40122 -0.04458,0.802438 -0.156029,1.159077 l 5.683932,5.683933 C 37.884539,32.044579 38.285758,32 38.686977,32 c 0.401219,0 0.802437,0.04458 1.159076,0.15603 l 7.912925,-7.935215 c -0.111449,-0.356639 -0.156029,-0.735568 -0.156029,-1.136786 0,-2.451893 2.006093,-4.457986 4.457988,-4.457986 2.451892,0 4.457986,2.006093 4.457986,4.457986 z"
+     id="path10"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+</svg>
diff --git a/include/ignition/gui/resources.qrc b/include/ignition/gui/resources.qrc
index 067e5d935..823ed88b1 100644
--- a/include/ignition/gui/resources.qrc
+++ b/include/ignition/gui/resources.qrc
@@ -4,6 +4,7 @@
 
   <file>qml/Chart.qml</file>
   <file>qml/GzColor.qml</file>
+  <file>qml/GzPlotIcon.qml</file>
   <file>qml/GzPose.qml</file>
   <file>qml/GzVector3.qml</file>
   <file>qml/IgnCard.qml</file>
@@ -26,12 +27,14 @@
   <file>qml/images/menu.png</file>
   <file>qml/images/export_icon.png</file>
   <file>qml/images/search.svg</file>
+  <file>qml/images/plottable_icon.svg</file>
 </qresource>
 <qresource prefix="ign-gui-qml/ignition/gui">
     <!-- This qmldir file defines a QML module that can be imported -->
     <file alias="qmldir">qml/qmldir</file>
     <!-- Add any QML components referenced in the qmldir file here -->
     <file alias="GzColor.qml">qml/GzColor.qml</file>
+    <file alias="GzPlotIcon.qml">qml/GzPlotIcon.qml</file>
     <file alias="GzPose.qml">qml/GzPose.qml</file>
     <file alias="GzVector3.qml">qml/GzVector3.qml</file>
     <file alias="IgnSnackBar.qml">qml/IgnSnackBar.qml</file>