diff --git a/package.json b/package.json
index d66f1fd9a..d044779e0 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,10 @@
     "react-dropzone": "^4.2.9",
     "react-plotly.js": "^2.2.0",
     "react-rangeslider": "^2.2.0",
+    "react-resizable-rotatable-draggable": "^0.1.8",
     "react-select": "^1.2.0",
     "react-tabs": "^2.2.1",
+    "styled-components": "^3.3.3",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index fcb10bc15..9d12746c8 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -4,6 +4,7 @@ import {PanelMenuWrapper} from './components';
 import {
   GraphCreatePanel,
   GraphTransformsPanel,
+  GraphSubplotsPanel,
   StyleLayoutPanel,
   StyleAxesPanel,
   StyleLegendPanel,
@@ -26,6 +27,7 @@ class DefaultEditor extends Component {
       <PanelMenuWrapper>
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
+        <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
         <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
diff --git a/src/EditorControls.js b/src/EditorControls.js
index 3ddc20af5..4a6e47efc 100644
--- a/src/EditorControls.js
+++ b/src/EditorControls.js
@@ -149,6 +149,9 @@ class EditorControls extends Component {
           if (this.props.beforeDeleteTrace) {
             this.props.beforeDeleteTrace(payload);
           }
+
+          shamefullyAdjustAxisRef(graphDiv, payload);
+
           graphDiv.data.splice(payload.traceIndexes[0], 1);
           if (this.props.afterDeleteTrace) {
             this.props.afterDeleteTrace(payload);
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index d40030578..a89f81743 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -68,7 +68,10 @@ export class Panel extends Component {
     let numFolds = 0;
 
     React.Children.forEach(this.props.children, child => {
-      if ((child.type.plotly_editor_traits || {}).foldable) {
+      if (
+        ((child && child.type && child.type.plotly_editor_traits) || {})
+          .foldable
+      ) {
         numFolds++;
       }
     });
@@ -100,7 +103,10 @@ export class Panel extends Component {
     const newChildren = React.Children.map(
       this.props.children,
       (child, index) => {
-        if ((child.type.plotly_editor_traits || {}).foldable) {
+        if (
+          ((child && child.type && child.type.plotly_editor_traits) || {})
+            .foldable
+        ) {
           return cloneElement(child, {
             key: index,
             folded: individualFoldStates[index] || false,
diff --git a/src/components/containers/SubplotAccordion.js b/src/components/containers/SubplotAccordion.js
new file mode 100644
index 000000000..4612e4448
--- /dev/null
+++ b/src/components/containers/SubplotAccordion.js
@@ -0,0 +1,154 @@
+import PlotlyFold from './PlotlyFold';
+import TraceRequiredPanel from './TraceRequiredPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {
+  connectTraceToPlot,
+  connectCartesianSubplotToLayout,
+  connectNonCartesianSubplotToLayout,
+} from 'lib';
+import {TRACE_TO_AXIS, SUBPLOT_TO_ATTR} from 'lib/constants';
+
+const TraceFold = connectTraceToPlot(PlotlyFold);
+const NonCartesianSubplotFold = connectNonCartesianSubplotToLayout(PlotlyFold);
+const CartesianSubplotFold = connectCartesianSubplotToLayout(PlotlyFold);
+
+class SubplotAccordion extends Component {
+  render() {
+    const {data = [], layout = {}} = this.context;
+    const {children, messageIfEmptyFold} = this.props;
+    const subplotFolds = [];
+
+    const allCartesianAxisCombinations = data.reduce((acc, curVal, inx) => {
+      if (TRACE_TO_AXIS.cartesian.some(c => c === curVal.type)) {
+        const xaxis = 'xaxis' + (curVal.xaxis ? curVal.xaxis.substring(1) : '');
+        const yaxis = 'yaxis' + (curVal.yaxis ? curVal.yaxis.substring(1) : '');
+
+        const existingComboIndex = acc.findIndex(
+          t => t.xaxis === xaxis && t.yaxis === yaxis
+        );
+        if (existingComboIndex === -1) {
+          acc.push({
+            xaxis: xaxis,
+            yaxis: yaxis,
+            xaxisName: curVal.xaxis || 'x1',
+            yaxisName: curVal.yaxis || 'y1',
+            index: [inx],
+          });
+        } else {
+          acc[existingComboIndex].index.push(inx);
+        }
+      }
+      return acc;
+    }, []);
+
+    allCartesianAxisCombinations.forEach(
+      d =>
+        (subplotFolds[d.index[0]] = (
+          <CartesianSubplotFold
+            key={d.index[0]}
+            traceIndexes={d.index}
+            canDelete={false}
+            messageIfEmpty={messageIfEmptyFold}
+            xaxis={d.xaxis}
+            yaxis={d.yaxis}
+            name={`${d.xaxisName} ${d.yaxisName}`}
+          >
+            {children}
+          </CartesianSubplotFold>
+        ))
+    );
+
+    // For each key in layout, find all traces that belong to this subplot.
+    // E.g. if layout attr is 'ternary', find all traces that are of type
+    // that has subplot ternary, if layout attr is 'ternary2', find traces
+    // of right type that have attr 'subplot': 'ternary' in their data.
+
+    /**
+    Example: 
+    {
+      "data": [
+        {
+          "type": "scatterternary",
+          "mode": "markers",
+        },
+        {
+          "type": "scatterternary",
+          "mode": "markers",
+          "subplot": "ternary2"
+        }
+      ],
+      "layout": {
+        "ternary": {},
+        "ternary2": {},
+      },
+    }
+     */
+
+    Object.keys(layout).forEach(layoutKey => {
+      const traceIndexes = [];
+      if (
+        ['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(subplotType => {
+          const trIndex =
+            SUBPLOT_TO_ATTR[subplotType].layout === layoutKey
+              ? data.findIndex(trace =>
+                  TRACE_TO_AXIS[subplotType].some(tt => tt === trace.type)
+                )
+              : data.findIndex(
+                  trace =>
+                    trace[SUBPLOT_TO_ATTR[subplotType].data] === layoutKey
+                );
+          if (trIndex !== -1) {
+            traceIndexes.push(trIndex);
+          }
+          return layoutKey.startsWith(SUBPLOT_TO_ATTR[subplotType].layout);
+        })
+      ) {
+        subplotFolds[traceIndexes[0]] = (
+          <NonCartesianSubplotFold
+            key={layoutKey}
+            traceIndexes={traceIndexes}
+            canDelete={false}
+            messageIfEmpty={messageIfEmptyFold}
+            subplot={layoutKey}
+            name={layoutKey}
+          >
+            {children}
+          </NonCartesianSubplotFold>
+        );
+      }
+    });
+
+    data.forEach((d, i) => {
+      if ((d.type === 'pie' && d.values) || d.type === 'table') {
+        subplotFolds[i] = (
+          <TraceFold
+            key={i}
+            traceIndexes={[i]}
+            canDelete={false}
+            messageIfEmpty={messageIfEmptyFold}
+            name={`${d.type} ${i}`}
+          >
+            {children}
+          </TraceFold>
+        );
+      }
+    });
+
+    return <TraceRequiredPanel>{subplotFolds}</TraceRequiredPanel>;
+  }
+}
+
+SubplotAccordion.contextTypes = {
+  fullData: PropTypes.array,
+  data: PropTypes.array,
+  layout: PropTypes.object,
+  localize: PropTypes.func,
+};
+
+SubplotAccordion.propTypes = {
+  children: PropTypes.node,
+  messageIfEmptyFold: PropTypes.string,
+};
+
+export default SubplotAccordion;
diff --git a/src/components/containers/__tests__/Fold-test.js b/src/components/containers/__tests__/Fold-test.js
index 0e72fea0c..c846e8f4f 100644
--- a/src/components/containers/__tests__/Fold-test.js
+++ b/src/components/containers/__tests__/Fold-test.js
@@ -46,6 +46,10 @@ describe('<PlotlyFold>', () => {
       .simulate('click');
 
     const payload = beforeDeleteTrace.mock.calls[0][0];
-    expect(payload).toEqual({traceIndexes: [0]});
+    expect(payload).toEqual({
+      axesToBeGarbageCollected: [],
+      subplotToBeGarbageCollected: null,
+      traceIndexes: [0],
+    });
   });
 });
diff --git a/src/components/containers/index.js b/src/components/containers/index.js
index 53ede3124..926611282 100644
--- a/src/components/containers/index.js
+++ b/src/components/containers/index.js
@@ -9,6 +9,7 @@ import PlotlyFold, {Fold} from './PlotlyFold';
 import MenuPanel from './MenuPanel';
 import PlotlyPanel, {Panel} from './PlotlyPanel';
 import PlotlySection, {Section} from './PlotlySection';
+import SubplotAccordion from './SubplotAccordion';
 import TraceAccordion from './TraceAccordion';
 import TransformAccordion from './TransformAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
@@ -32,6 +33,7 @@ export {
   Panel,
   PlotlySection,
   Section,
+  SubplotAccordion,
   TraceAccordion,
   TransformAccordion,
   TraceMarkerSection,
diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index 73f128780..cb4e294bc 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -1,7 +1,7 @@
 import Dropdown from './Dropdown';
 import Info from './Info';
 import PropTypes from 'prop-types';
-import React, {Component, Fragment} from 'react';
+import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
@@ -11,6 +11,7 @@ import {
   getAxisTitle,
   axisIdToAxisName,
 } from 'lib';
+import {PlotlySection} from 'components';
 
 class UnconnectedAxisCreator extends Component {
   canAddAxis() {
@@ -21,62 +22,61 @@ class UnconnectedAxisCreator extends Component {
     );
   }
 
-  updateAxis() {
+  addAndUpdateAxis() {
     const {attr, updateContainer} = this.props;
-    const {onUpdate, fullLayout} = this.context;
+    const {
+      onUpdate,
+      fullLayout: {_subplots: subplots},
+    } = this.context;
+    const lastAxisNumber =
+      Number(subplots[attr][subplots[attr].length - 1].charAt(1)) || 1;
 
     updateContainer({
-      [attr]: attr.charAt(0) + (fullLayout._subplots[attr].length + 1),
+      [attr]: attr.charAt(0) + (lastAxisNumber + 1),
     });
 
+    let side = null;
     if (attr === 'yaxis') {
-      onUpdate({
-        type: EDITOR_ACTIONS.UPDATE_LAYOUT,
-        payload: {
-          update: {
-            [`${attr + (fullLayout._subplots[attr].length + 1)}.side`]: 'right',
-            [`${attr +
-              (fullLayout._subplots[attr].length + 1)}.overlaying`]: 'y',
-          },
-        },
-      });
+      side = 'right';
+    } else if (attr === 'xaxis') {
+      side = 'top';
     }
 
-    if (attr === 'xaxis') {
-      onUpdate({
-        type: EDITOR_ACTIONS.UPDATE_LAYOUT,
-        payload: {
-          update: {
-            [`${attr + (fullLayout._subplots[attr].length + 1)}.side`]: 'top',
-            [`${attr +
-              (fullLayout._subplots[attr].length + 1)}.overlaying`]: 'x',
-          },
+    onUpdate({
+      type: EDITOR_ACTIONS.UPDATE_LAYOUT,
+      payload: {
+        update: {
+          [`${attr + (lastAxisNumber + 1)}.side`]: side,
+          [`${attr + (lastAxisNumber + 1)}.overlaying`]: !(
+            attr === 'yaxis' || attr === 'xaxis'
+          )
+            ? null
+            : subplots[attr][subplots[attr].length - 1],
         },
-      });
-    }
+      },
+    });
   }
 
-  recalcAxes(update) {
+  updateAxis(update) {
     const currentAxisId = this.props.fullContainer[this.props.attr];
+    const axesToBeGarbageCollected = [];
 
     // When we select another axis, make sure no unused axes are left
-    const tracesNeedingAxisAdjustment = this.context.fullData.some(
-      t =>
-        t[this.props.attr] === currentAxisId &&
-        t.index !== this.props.fullContainer.index
-    )
-      ? null
-      : this.context.fullData.filter(
-          trace =>
-            Number(trace[this.props.attr].slice(1)) >
-            Number(currentAxisId.slice(1))
-        );
+    if (
+      currentAxisId !== update &&
+      !this.context.fullData.some(
+        trace =>
+          trace[this.props.attr] === currentAxisId &&
+          trace.index !== this.props.fullContainer.index
+      )
+    ) {
+      axesToBeGarbageCollected.push(currentAxisId);
+    }
 
     this.context.onUpdate({
       type: EDITOR_ACTIONS.UPDATE_TRACES,
       payload: {
-        tracesNeedingAxisAdjustment,
-        axisAttrToAdjust: this.props.attr,
+        axesToBeGarbageCollected,
         update: {[this.props.attr]: update},
         traceIndexes: [this.props.fullContainer.index],
       },
@@ -86,7 +86,11 @@ class UnconnectedAxisCreator extends Component {
   render() {
     const icon = <PlusIcon />;
     const extraComponent = this.canAddAxis() ? (
-      <Button variant="no-text" icon={icon} onClick={() => this.updateAxis()} />
+      <Button
+        variant="no-text"
+        icon={icon}
+        onClick={() => this.addAndUpdateAxis()}
+      />
     ) : (
       <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
     );
@@ -97,7 +101,7 @@ class UnconnectedAxisCreator extends Component {
         attr={this.props.attr}
         clearable={false}
         options={this.props.options}
-        updatePlot={u => this.recalcAxes(u)}
+        updatePlot={u => this.updateAxis(u)}
         extraComponent={extraComponent}
       />
     );
@@ -125,16 +129,16 @@ const AxisCreator = connectToContainer(UnconnectedAxisCreator);
 
 class UnconnectedAxesCreator extends Component {
   render() {
-    const isFirstTraceOfType =
-      this.context.data.filter(d => d.type === this.props.container.type)
+    const axisType = traceTypeToAxisType(this.props.container.type);
+    const isFirstTraceOfAxisType =
+      this.context.data.filter(d => traceTypeToAxisType(d.type) === axisType)
         .length === 1;
 
-    if (isFirstTraceOfType) {
+    if (isFirstTraceOfAxisType) {
       return null;
     }
 
     const {fullLayout, localize: _} = this.context;
-    const axisType = traceTypeToAxisType(this.props.container.type);
     const controls = [];
 
     function getOptions(axisType) {
@@ -144,7 +148,6 @@ class UnconnectedAxesCreator extends Component {
       }));
     }
 
-    // for the moment only cartesian subplots are supported
     if (axisType === 'cartesian') {
       ['xaxis', 'yaxis'].forEach((type, index) => {
         controls.push(
@@ -159,12 +162,14 @@ class UnconnectedAxesCreator extends Component {
     }
 
     return (
-      <Fragment>
+      <PlotlySection name={_('Axes to Use')}>
         {controls}
         <Info>
-          {_('You can style and position your axes in the Style > Axes Panel')}
+          {_(
+            'You can style and position your axes in the Graph > Subplots Panel'
+          )}
         </Info>
-      </Fragment>
+      </PlotlySection>
     );
   }
 }
diff --git a/src/components/fields/DualNumeric.js b/src/components/fields/DualNumeric.js
new file mode 100644
index 000000000..7c02bd21c
--- /dev/null
+++ b/src/components/fields/DualNumeric.js
@@ -0,0 +1,95 @@
+import Field from './Field';
+import NumericInput from '../widgets/NumericInput';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+import nestedProperty from 'plotly.js/src/lib/nested_property';
+
+export class UnconnectedDualNumericFraction extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.updatePlot = this.updatePlot.bind(this);
+    this.updatePlot2 = this.updatePlot2.bind(this);
+  }
+
+  updatePlot(value) {
+    this.props.updatePlot(this.props.percentage ? value / 100 : value);
+  }
+
+  updatePlot2(value) {
+    this.props.updateContainer({
+      [this.props.attr2]: this.props.percentage ? value / 100 : value,
+    });
+  }
+
+  render() {
+    const {percentage, multiValued, attr2, step, min, max} = this.props;
+    let fullValue = percentage
+      ? Math.round(100 * this.props.fullValue)
+      : this.props.fullValue;
+    let fullValue2 = nestedProperty(this.context.fullContainer, attr2).get();
+    if (percentage) {
+      fullValue2 = Math.round(100 * fullValue2);
+    }
+    let placeholder;
+    let placeholder2;
+    if (multiValued) {
+      placeholder = fullValue;
+      placeholder2 = fullValue2;
+      fullValue = '';
+      fullValue2 = '';
+    }
+
+    return (
+      <Field {...this.props}>
+        <div className="numeric-input__wrapper">
+          <NumericInput
+            value={fullValue}
+            defaultValue={this.props.defaultValue}
+            placeholder={placeholder}
+            step={step}
+            min={min}
+            max={max}
+            onChange={this.updatePlot}
+            onUpdate={this.updatePlot}
+            showArrows={!this.props.hideArrows}
+            showSlider={false}
+          />
+          <NumericInput
+            value={fullValue2}
+            defaultValue={this.props.defaultValue}
+            placeholder={placeholder2}
+            step={step}
+            min={min}
+            max={max}
+            onChange={this.updatePlot2}
+            onUpdate={this.updatePlot2}
+            showArrows={!this.props.hideArrows}
+            showSlider={false}
+          />
+        </div>
+      </Field>
+    );
+  }
+}
+
+UnconnectedDualNumericFraction.propTypes = {
+  defaultValue: PropTypes.any,
+  fullValue: PropTypes.any,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  multiValued: PropTypes.bool,
+  hideArrows: PropTypes.bool,
+  showSlider: PropTypes.bool,
+  step: PropTypes.number,
+  updatePlot: PropTypes.func,
+  attr2: PropTypes.any,
+  percentage: PropTypes.bool,
+  ...Field.propTypes,
+};
+
+UnconnectedDualNumericFraction.contextTypes = {
+  fullContainer: PropTypes.object,
+};
+
+export default connectToContainer(UnconnectedDualNumericFraction);
diff --git a/src/components/fields/RectanglePositioner.js b/src/components/fields/RectanglePositioner.js
new file mode 100644
index 000000000..d473e22e7
--- /dev/null
+++ b/src/components/fields/RectanglePositioner.js
@@ -0,0 +1,192 @@
+import Field from './Field';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+import ResizableRect from 'react-resizable-rotatable-draggable';
+import RadioBlocks from '../widgets/RadioBlocks';
+import DualNumeric from './DualNumeric';
+
+const maxWidth = 286;
+const gridRes = 8;
+
+class UnconnectedRectanglePositioner extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.sendUpdate = this.sendUpdate.bind(this);
+    this.attr = this.props.cartesian
+      ? {
+          x: ['xaxis.domain[0]', 'xaxis.domain[1]'],
+          y: ['yaxis.domain[0]', 'yaxis.domain[1]'],
+        }
+      : {x: ['domain.x[0]', 'domain.x[1]'], y: ['domain.y[0]', 'domain.y[1]']};
+    this.state = {snap: true};
+  }
+
+  sendUpdate({x, y, width, height, fieldWidthPx, fieldHeightPx}) {
+    const x0 = x / fieldWidthPx;
+    const x1 = (width + x) / fieldWidthPx;
+    const y0 = (fieldHeightPx - (height + y)) / fieldHeightPx;
+    const y1 = (fieldHeightPx - y) / fieldHeightPx;
+
+    const snap = this.state.snap
+      ? v => Math.round(v * gridRes) / gridRes
+      : v => v;
+
+    const payload = {};
+
+    if (x0 >= 0 && x1 <= 1) {
+      payload[this.attr.x[0]] = snap(x0);
+      payload[this.attr.x[1]] = snap(x1);
+    }
+
+    if (y0 >= 0 && y1 <= 1) {
+      payload[this.attr.y[0]] = snap(y0);
+      payload[this.attr.y[1]] = snap(y1);
+    }
+
+    this.context.updateContainer(payload);
+  }
+
+  render() {
+    const {attr, cartesian} = this.props;
+    const {
+      localize: _,
+      fullContainer,
+      fullLayout: {width: plotWidthPx, height: plotHeightPx},
+    } = this.context;
+    const x = cartesian ? fullContainer.xaxis.domain : fullContainer.domain.x;
+    const y = cartesian ? fullContainer.yaxis.domain : fullContainer.domain.y;
+    const aspectRatio = plotHeightPx / plotWidthPx;
+    const fieldWidthPx = Math.min(maxWidth, maxWidth / aspectRatio);
+    const fieldHeightPx = Math.min(maxWidth, maxWidth * aspectRatio);
+
+    const width = fieldWidthPx * (x[1] - x[0]);
+    const height = fieldHeightPx * (y[1] - y[0]);
+    const left = fieldWidthPx * x[0];
+    const top = fieldHeightPx * (1 - y[1]);
+
+    let zoomable = '';
+    if (
+      !fullContainer.xaxis ||
+      !fullContainer.yaxis ||
+      (!fullContainer.xaxis.overlaying && !fullContainer.yaxis.overlaying)
+    ) {
+      zoomable = 'n, w, s, e, nw, ne, se, sw';
+    } else if (!fullContainer.xaxis.overlaying) {
+      zoomable = 'e, w';
+    } else if (!fullContainer.yaxis.overlaying) {
+      zoomable = 'n, s';
+    }
+
+    return (
+      <Field {...this.props} attr={attr}>
+        <Field label={_('Snap to Grid')}>
+          <RadioBlocks
+            alignment="center"
+            onOptionChange={snap => this.setState({snap: snap})}
+            activeOption={this.state.snap}
+            options={[
+              {label: _('On'), value: true},
+              {label: _('Off'), value: false},
+            ]}
+          />
+        </Field>
+        <div
+          className="rect-container"
+          style={{
+            width: fieldWidthPx + 1,
+            height: fieldHeightPx + 1,
+          }}
+        >
+          {Array(gridRes * gridRes)
+            .fill(0)
+            .map((v, i) => (
+              <div
+                key={i}
+                className="rect-grid"
+                style={{
+                  width: fieldWidthPx / gridRes - 1,
+                  height: fieldHeightPx / gridRes - 1,
+                  borderBottom:
+                    i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
+                  borderRight: (i + 1) % gridRes ? '0' : '1px solid',
+                }}
+              />
+            ))}
+          <ResizableRect
+            bounds="parent"
+            width={width}
+            height={height}
+            left={left}
+            top={top}
+            rotatable={false}
+            draggable={!this.state.snap}
+            zoomable={zoomable}
+            onResize={style => {
+              this.sendUpdate({
+                fieldWidthPx,
+                fieldHeightPx,
+                width: style.width,
+                height: style.height,
+                x: style.left,
+                y: style.top,
+              });
+            }}
+            onDrag={(deltaX, deltaY) => {
+              this.sendUpdate({
+                fieldWidthPx,
+                fieldHeightPx,
+                width,
+                height,
+                x: left + deltaX,
+                y: top + deltaY,
+              });
+            }}
+          />
+        </div>
+        {fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
+          ''
+        ) : (
+          <DualNumeric
+            label={_('X')}
+            attr={this.attr.x[0]}
+            attr2={this.attr.x[1]}
+            percentage
+            step={1}
+            min={0}
+            max={100}
+          />
+        )}
+        {fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
+          ''
+        ) : (
+          <DualNumeric
+            label={_('Y')}
+            attr={this.attr.y[0]}
+            attr2={this.attr.y[1]}
+            percentage
+            step={1}
+            min={0}
+            max={100}
+          />
+        )}
+      </Field>
+    );
+  }
+}
+
+UnconnectedRectanglePositioner.propTypes = {
+  fullValue: PropTypes.any,
+  updatePlot: PropTypes.func,
+  cartesian: PropTypes.bool,
+  ...Field.propTypes,
+};
+
+UnconnectedRectanglePositioner.contextTypes = {
+  localize: PropTypes.func,
+  updateContainer: PropTypes.func,
+  fullContainer: PropTypes.object,
+  fullLayout: PropTypes.object,
+};
+
+export default connectToContainer(UnconnectedRectanglePositioner);
diff --git a/src/components/fields/SubplotCreator.js b/src/components/fields/SubplotCreator.js
new file mode 100644
index 000000000..d69f7bd80
--- /dev/null
+++ b/src/components/fields/SubplotCreator.js
@@ -0,0 +1,181 @@
+import Dropdown from './Dropdown';
+import Info from './Info';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR} from 'lib/constants';
+import Button from '../widgets/Button';
+import {PlusIcon} from 'plotly-icons';
+import {connectToContainer, traceTypeToAxisType, getSubplotTitle} from 'lib';
+import {PlotlySection} from 'components';
+
+class UnconnectedSingleSubplotCreator extends Component {
+  canAddAxis() {
+    const currentAxisId = this.props.fullContainer[this.props.attr];
+    const currentTraceIndex = this.props.fullContainer.index;
+    return this.context.fullData.some(
+      d => d.index !== currentTraceIndex && d[this.props.attr] === currentAxisId
+    );
+  }
+
+  addAndUpdateSubplot() {
+    const {attr, layoutAttr, updateContainer} = this.props;
+    const {
+      fullLayout: {_subplots: subplots},
+    } = this.context;
+    const lastSubplotNumber =
+      Number(
+        subplots[layoutAttr][subplots[layoutAttr].length - 1].split(
+          SUBPLOT_TO_ATTR[layoutAttr].layout
+        )[1]
+      ) || 1;
+
+    updateContainer({
+      [attr]: SUBPLOT_TO_ATTR[layoutAttr].layout + (lastSubplotNumber + 1),
+    });
+  }
+
+  updateSubplot(update) {
+    const currentSubplotId = this.props.fullContainer[
+      SUBPLOT_TO_ATTR[this.props.attr].data
+    ];
+    let subplotToBeGarbageCollected = null;
+
+    // When we select another subplot, make sure no unused axes are left
+    if (
+      currentSubplotId !== update &&
+      !this.context.fullData.some(
+        trace =>
+          trace[SUBPLOT_TO_ATTR[this.props.attr].data] === currentSubplotId &&
+          trace.index !== this.props.fullContainer.index
+      )
+    ) {
+      subplotToBeGarbageCollected = currentSubplotId;
+    }
+
+    this.context.onUpdate({
+      type: EDITOR_ACTIONS.UPDATE_TRACES,
+      payload: {
+        subplotToBeGarbageCollected,
+        update: {[this.props.attr]: update},
+        traceIndexes: [this.props.fullContainer.index],
+      },
+    });
+  }
+
+  render() {
+    const icon = <PlusIcon />;
+    const extraComponent = this.canAddAxis() ? (
+      <Button
+        variant="no-text"
+        icon={icon}
+        onClick={() => this.addAndUpdateSubplot()}
+      />
+    ) : (
+      <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
+    );
+
+    return (
+      <Dropdown
+        label={this.props.label}
+        attr={this.props.attr}
+        clearable={false}
+        options={this.props.options}
+        updatePlot={u => this.updateSubplot(u)}
+        extraComponent={extraComponent}
+      />
+    );
+  }
+}
+
+UnconnectedSingleSubplotCreator.propTypes = {
+  attr: PropTypes.string,
+  layoutAttr: PropTypes.string,
+  label: PropTypes.string,
+  options: PropTypes.array,
+  canAddAxis: PropTypes.bool,
+  container: PropTypes.object,
+  fullContainer: PropTypes.object,
+  updateContainer: PropTypes.func,
+};
+
+UnconnectedSingleSubplotCreator.contextTypes = {
+  fullLayout: PropTypes.object,
+  data: PropTypes.array,
+  fullData: PropTypes.array,
+  onUpdate: PropTypes.func,
+};
+
+const SingleSubplotCreator = connectToContainer(
+  UnconnectedSingleSubplotCreator
+);
+
+class UnconnectedSubplotCreator extends Component {
+  render() {
+    const subplotType = traceTypeToAxisType(this.props.container.type);
+    if (
+      !['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(
+        t => t === subplotType
+      )
+    ) {
+      return null;
+    }
+
+    const isFirstTraceOfAxisType =
+      this.context.data.filter(d => traceTypeToAxisType(d.type) === subplotType)
+        .length === 1;
+    if (isFirstTraceOfAxisType) {
+      return null;
+    }
+
+    const {fullLayout, localize: _} = this.context;
+
+    function getOptions(subplotType) {
+      return fullLayout._subplots[subplotType].map(subplotId => ({
+        label: getSubplotTitle(subplotId, subplotType),
+        value: subplotId,
+      }));
+    }
+
+    return (
+      <PlotlySection name={_('Subplots to Use')}>
+        <SingleSubplotCreator
+          attr={SUBPLOT_TO_ATTR[subplotType].data}
+          layoutAttr={subplotType}
+          label={SUBPLOT_TO_ATTR[subplotType].layout}
+          options={getOptions(subplotType)}
+        />
+        <Info>
+          {_(
+            'You can style and position your subplots in the Graph > Subplots Panel'
+          )}
+        </Info>
+      </PlotlySection>
+    );
+  }
+}
+
+UnconnectedSubplotCreator.propTypes = {
+  container: PropTypes.object,
+  fullContainer: PropTypes.object,
+};
+
+UnconnectedSubplotCreator.contextTypes = {
+  data: PropTypes.array,
+  fullData: PropTypes.array,
+  fullLayout: PropTypes.object,
+  localize: PropTypes.func,
+};
+
+export default connectToContainer(UnconnectedSubplotCreator, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {data} = context;
+    const {fullContainer} = plotProps;
+
+    plotProps.isVisible =
+      data.length > 1 &&
+      data[fullContainer.index] &&
+      ['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(
+        t => t === traceTypeToAxisType(data[fullContainer.index].type)
+      );
+  },
+});
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index d46047ce6..7fdb95479 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -17,22 +17,14 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
     const {localize: _} = context;
     let options = [];
 
-    if (
-      plotProps.fullContainer &&
-      plotProps.fullContainer._subplot &&
-      plotProps.fullContainer._subplot.includes('xaxis')
-    ) {
+    if (props.attr.startsWith('xaxis')) {
       options = context.fullLayout._subplots.yaxis.map(axis => {
         return {
           label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
           value: axis,
         };
       });
-    } else if (
-      plotProps.fullContainer &&
-      plotProps.fullContainer._subplot &&
-      plotProps.fullContainer._subplot.includes('yaxis')
-    ) {
+    } else if (props.attr.startsWith('yaxis')) {
       options = context.fullLayout._subplots.xaxis.map(axis => {
         return {
           label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
@@ -49,22 +41,15 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _} = context;
     let options = [];
-    if (
-      plotProps.fullContainer &&
-      plotProps.fullContainer._subplot &&
-      plotProps.fullContainer._subplot.includes('xaxis')
-    ) {
+
+    if (props.attr.startsWith('xaxis')) {
       options = context.fullLayout._subplots.xaxis.map(axis => {
         return {
           label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
           value: axis,
         };
       });
-    } else if (
-      plotProps.fullContainer &&
-      plotProps.fullContainer._subplot &&
-      plotProps.fullContainer._subplot.includes('yaxis')
-    ) {
+    } else if (props.attr.startsWith('yaxis')) {
       options = context.fullLayout._subplots.yaxis.map(axis => {
         return {
           label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
@@ -78,7 +63,11 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
     // filter out the current axisID, can't overlay over itself
     plotProps.options = options.filter(
       option =>
-        context.fullContainer && context.fullContainer._id !== option.value
+        context.fullContainer &&
+        context.fullContainer.xaxis &&
+        context.fullContainer.yaxis &&
+        context.fullContainer.xaxis._id !== option.value &&
+        context.fullContainer.yaxis._id !== option.value
     );
 
     plotProps.clearable = false;
@@ -99,11 +88,8 @@ export const RangesliderVisible = connectToContainer(UnconnectedRadio, {
 export const AxisSide = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
     const _ = context.localize;
-    if (
-      context.fullContainer &&
-      context.fullContainer._id &&
-      context.fullContainer._id.startsWith('y')
-    ) {
+
+    if (props.attr.startsWith('yaxis')) {
       plotProps.options = [
         {label: _('Left'), value: 'left'},
         {label: _('Right'), value: 'right'},
@@ -111,11 +97,7 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
       return;
     }
 
-    if (
-      context.fullContainer &&
-      context.fullContainer._id &&
-      context.fullContainer._id.startsWith('x')
-    ) {
+    if (props.attr.startsWith('xaxis')) {
       plotProps.options = [
         {label: _('Bottom'), value: 'bottom'},
         {label: _('Top'), value: 'top'},
@@ -235,8 +217,8 @@ UnconnectedNumericFraction.defaultProps = {
 
 const numericFractionModifyPlotProps = (props, context, plotProps) => {
   const {attrMeta, fullValue, updatePlot} = plotProps;
-  const min = attrMeta.min || 0;
-  const max = attrMeta.max || 1;
+  const min = (attrMeta && attrMeta.min) || 0;
+  const max = (attrMeta && attrMeta.max) || 1;
   if (isNumeric(fullValue)) {
     plotProps.fullValue = Math.round(100 * (fullValue - min) / (max - min));
   }
diff --git a/src/components/fields/index.js b/src/components/fields/index.js
index 140e2125a..50318b3f1 100644
--- a/src/components/fields/index.js
+++ b/src/components/fields/index.js
@@ -11,19 +11,21 @@ import Radio from './Radio';
 import TextEditor from './TextEditor';
 import DataSelector from './DataSelector';
 import Numeric from './Numeric';
+import DualNumeric from './DualNumeric';
 import AxisRangeValue from './AxisRangeValue';
 import Text from './Text';
 import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
 import ErrorBars from './ErrorBars';
 import AxesCreator from './AxesCreator';
+import SubplotCreator from './SubplotCreator';
 import UpdateMenuButtons from './UpdateMenuButtons';
 import {FilterOperation, FilterValue} from './FilterOperation';
 import MarkerSize from './MarkerSize';
 import MarkerColor from './MarkerColor';
 import VisibilitySelect from './VisibilitySelect';
 import MultiColorPicker from './MultiColorPicker';
-
+import RectanglePositioner from './RectanglePositioner';
 import {
   AnnotationArrowRef,
   AnnotationRef,
@@ -77,6 +79,7 @@ export {
   LineDashSelector,
   LineShapeSelector,
   Numeric,
+  DualNumeric,
   AxisRangeValue,
   Text,
   Radio,
@@ -86,6 +89,7 @@ export {
   TraceOrientation,
   TraceSelector,
   AxesCreator,
+  SubplotCreator,
   AxisOverlayDropdown,
   AxisSide,
   UpdateMenuButtons,
@@ -95,4 +99,5 @@ export {
   MarkerColor,
   MultiColorPicker,
   VisibilitySelect,
+  RectanglePositioner,
 };
diff --git a/src/components/index.js b/src/components/index.js
index f0c230571..be590da84 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -30,11 +30,13 @@ import {
   LineDashSelector,
   LineShapeSelector,
   Numeric,
+  DualNumeric,
   AxisRangeValue,
   Text,
   Radio,
   RangesliderVisible,
   AxesCreator,
+  SubplotCreator,
   SymbolSelector,
   TextEditor,
   TraceOrientation,
@@ -46,6 +48,7 @@ import {
   MarkerColor,
   MultiColorPicker,
   VisibilitySelect,
+  RectanglePositioner,
 } from './fields';
 
 import {
@@ -65,6 +68,7 @@ import {
   PlotlyPanel,
   PlotlySection,
   Section,
+  SubplotAccordion,
   TraceAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
@@ -122,6 +126,7 @@ export {
   LineDashSelector,
   LineShapeSelector,
   Numeric,
+  DualNumeric,
   AxisRangeValue,
   Text,
   PlotlyPanel,
@@ -132,8 +137,10 @@ export {
   Section,
   SingleSidebarItem,
   AxesCreator,
+  SubplotCreator,
   SymbolSelector,
   TextEditor,
+  SubplotAccordion,
   TraceAccordion,
   TraceMarkerSection,
   TraceOrientation,
@@ -147,4 +154,5 @@ export {
   MarkerColor,
   MultiColorPicker,
   VisibilitySelect,
+  RectanglePositioner,
 };
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index cd2815e06..244947406 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -87,7 +87,7 @@ class TraceTypeSelector extends Component {
       glAvailable(computedValue.type) &&
       !computedValue.type.endsWith('gl')
     ) {
-      computedValue.type = computedValue.type + 'gl';
+      computedValue.type += 'gl';
     }
     updateContainer(computedValue);
     this.context.handleClose();
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index 566705ade..123768111 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -8,6 +8,7 @@ import {
   PlotlySection,
   LayoutSection,
   AxesCreator,
+  SubplotCreator,
   TraceAccordion,
   TraceSelector,
   TextEditor,
@@ -106,9 +107,8 @@ const GraphCreatePanel = (props, {localize: _}) => {
         />
       </TraceTypeSection>
 
-      <PlotlySection name={_('Axes to Use')}>
-        <AxesCreator attr="fake_attr" />
-      </PlotlySection>
+      <AxesCreator attr="fake_attr" />
+      <SubplotCreator attr="fake_attr" />
 
       <PlotlySection name={_('Error Bars X')}>
         <ErrorBars attr="error_x" />
diff --git a/src/default_panels/GraphSubplotsPanel.js b/src/default_panels/GraphSubplotsPanel.js
new file mode 100644
index 000000000..33e16e659
--- /dev/null
+++ b/src/default_panels/GraphSubplotsPanel.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  SubplotAccordion,
+  RectanglePositioner,
+  AxisOverlayDropdown,
+  PlotlySection,
+  TraceTypeSection,
+  AxisAnchorDropdown,
+  AxisSide,
+} from '../components';
+import {TRACE_TO_AXIS} from '../lib/constants';
+
+const GraphSubplotsPanel = (props, {localize: _}) => (
+  <SubplotAccordion canGroup>
+    <PlotlySection name={_('Boundaries')} attr="xaxis.domain[0]">
+      <AxisOverlayDropdown label={_('X Overlay')} attr="xaxis.overlaying" />
+      <AxisOverlayDropdown label={_('Y Overlay')} attr="yaxis.overlaying" />
+    </PlotlySection>
+
+    <RectanglePositioner attr="domain.x[0]" />
+    <RectanglePositioner attr="xaxis.domain[0]" cartesian />
+
+    <TraceTypeSection name={_('X Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
+      <AxisAnchorDropdown
+        label={_('Anchor to')}
+        attr="xaxis.anchor"
+        clearable={false}
+      />
+      <AxisSide label={_('Side')} attr="xaxis.side" />
+    </TraceTypeSection>
+    <TraceTypeSection name={_('Y Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
+      <AxisAnchorDropdown
+        label={_('Anchor to')}
+        attr="yaxis.anchor"
+        clearable={false}
+      />
+      <AxisSide label={_('Side')} attr="yaxis.side" />
+    </TraceTypeSection>
+  </SubplotAccordion>
+);
+
+GraphSubplotsPanel.contextTypes = {
+  localize: PropTypes.func,
+};
+
+export default GraphSubplotsPanel;
diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index 27fd88be4..71a65ae4d 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -1,9 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
-  AxisAnchorDropdown,
-  AxisOverlayDropdown,
-  AxisSide,
   AxesRange,
   DTicks,
   NTicks,
@@ -12,7 +9,6 @@ import {
   FontSelector,
   Numeric,
   NumericFraction,
-  NumericFractionDomain,
   Radio,
   TextEditor,
   PlotlySection,
@@ -23,8 +19,6 @@ import {
   RangeSelectorAccordion,
 } from '../components';
 
-import {TRACE_TO_AXIS} from '../lib/constants';
-
 class StyleAxesPanel extends Component {
   constructor(props, context) {
     super(props, context);
@@ -63,35 +57,6 @@ class StyleAxesPanel extends Component {
           <ColorPicker label={_('Font Color')} attr="titlefont.color" />
         </AxesFold>
 
-        <AxesFold
-          name={_('Layout')}
-          axisFilter={axis =>
-            !(
-              axis._subplot.includes('polar') ||
-              axis._subplot.includes('ternary') ||
-              axis._subplot.includes('scene') ||
-              axis._subplot.includes('geo')
-            )
-          }
-        >
-          <PlotlySection name={_('Boundaries')} attr="domain[0]">
-            <AxisOverlayDropdown label={_('Overlay')} attr="overlaying" />
-            <NumericFractionDomain
-              label={_('Start Position')}
-              attr="domain[0]"
-            />
-            <NumericFractionDomain label={_('End Position')} attr="domain[1]" />
-          </PlotlySection>
-
-          <TraceTypeSection
-            name={_('Anchor')}
-            traceTypes={TRACE_TO_AXIS.cartesian}
-          >
-            <AxisAnchorDropdown label={_('Anchor To')} attr="anchor" />
-            <AxisSide label={_('Side')} attr="side" />
-          </TraceTypeSection>
-        </AxesFold>
-
         <AxesFold name={_('Range')}>
           <PlotlySection name={_('Range')} attr="autorange">
             <Dropdown
diff --git a/src/default_panels/index.js b/src/default_panels/index.js
index 515b8d812..a6aa1ca59 100644
--- a/src/default_panels/index.js
+++ b/src/default_panels/index.js
@@ -10,6 +10,7 @@ import StyleImagesPanel from './StyleImagesPanel';
 import StyleTracesPanel from './StyleTracesPanel';
 import StyleColorbarsPanel from './StyleColorbarsPanel';
 import StyleUpdateMenusPanel from './StyleUpdateMenusPanel';
+import GraphSubplotsPanel from './GraphSubplotsPanel';
 
 export {
   GraphCreatePanel,
@@ -24,4 +25,5 @@ export {
   StyleTracesPanel,
   StyleColorbarsPanel,
   StyleUpdateMenusPanel,
+  GraphSubplotsPanel,
 };
diff --git a/src/index.js b/src/index.js
index 1c9ad5961..bbae7d04b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,8 @@ import PlotlyEditor from './PlotlyEditor';
 import DefaultEditor from './DefaultEditor';
 import EditorControls from './EditorControls';
 import {
+  connectCartesianSubplotToLayout,
+  connectNonCartesianSubplotToLayout,
   connectAnnotationToLayout,
   connectShapeToLayout,
   connectAggregationToTransform,
@@ -71,6 +73,7 @@ import {
   TraceMarkerSection,
   TraceRequiredPanel,
   TraceSelector,
+  RectanglePositioner,
 } from './components';
 
 import {
@@ -97,7 +100,6 @@ export {
   ArrowSelector,
   TransformAccordion,
   AxesFold,
-  connectAggregationToTransform,
   AxesRange,
   NTicks,
   DTicks,
@@ -150,11 +152,14 @@ export {
   TraceMarkerSection,
   TraceRequiredPanel,
   TraceSelector,
+  connectCartesianSubplotToLayout,
+  connectNonCartesianSubplotToLayout,
   connectAnnotationToLayout,
   connectShapeToLayout,
   connectImageToLayout,
   connectAxesToLayout,
   connectTransformToTrace,
+  connectAggregationToTransform,
   connectLayoutToPlot,
   connectToContainer,
   connectRangeSelectorToAxis,
@@ -165,6 +170,7 @@ export {
   walkObject,
   EditorControls,
   DefaultEditor,
+  RectanglePositioner,
 };
 
 export default PlotlyEditor;
diff --git a/src/lib/connectCartesianSubplotToLayout.js b/src/lib/connectCartesianSubplotToLayout.js
new file mode 100644
index 000000000..fd2b4b6f1
--- /dev/null
+++ b/src/lib/connectCartesianSubplotToLayout.js
@@ -0,0 +1,139 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {
+  getDisplayName,
+  plotlyTraceToCustomTrace,
+  renderTraceIcon,
+} from '../lib';
+
+export default function connectCartesianSubplotToLayout(WrappedComponent) {
+  class SubplotConnectedComponent extends Component {
+    constructor(props, context) {
+      super(props, context);
+
+      this.updateSubplot = this.updateSubplot.bind(this);
+      this.setLocals(props, context);
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+      this.setLocals(nextProps, nextContext);
+    }
+
+    setLocals(props, context) {
+      const {xaxis, yaxis, traceIndexes} = props;
+      const {container, fullContainer, data, fullData} = context;
+
+      this.container = {
+        xaxis: container[xaxis],
+        yaxis: container[yaxis],
+      };
+      this.fullContainer = {
+        xaxis: fullContainer[xaxis],
+        yaxis: fullContainer[yaxis],
+      };
+
+      const trace = traceIndexes.length > 0 ? data[traceIndexes[0]] : {};
+      let fullTrace = {};
+      for (let i = 0; i < fullData.length; i++) {
+        if (traceIndexes[0] === fullData[i]._fullInput.index) {
+          /*
+           * Fit transforms are custom transforms in our custom plotly.js bundle,
+           * they are different from others as they create an extra trace in the
+           * data array. When plotly.js runs supplyTraceDefaults (before the
+           * transforms code executes) it stores the result in _fullInput,
+           * so that we have a reference to what the original, corrected input was.
+           * Then the transform code runs, our figure changes accordingly, but
+           * we're still able to use the original input as it's in _fullInput.
+           * This is the desired behaviour for our transforms usually,
+           * but it is not useful for fits, as the transform code adds some styles
+           * that are useful for the trace, so really for fits we'd like to read
+           * from _fullData, not _fullInput. Here we're setting _fullInput to
+           * _fullData as that is where the rest of our code expects to find its
+           * values.
+          */
+          if (
+            trace.transforms &&
+            trace.transforms.every(t => t.type === 'fit')
+          ) {
+            fullData[i]._fullInput = fullData[i];
+          }
+
+          fullTrace = fullData[i]._fullInput;
+
+          break;
+        }
+      }
+
+      if (trace && fullTrace) {
+        this.icon = renderTraceIcon(plotlyTraceToCustomTrace(trace));
+        this.name = fullTrace.name;
+      }
+    }
+
+    getChildContext() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(
+                attr
+                  .replace('xaxis', this.props.xaxis)
+                  .replace('yaxis', this.props.yaxis)
+              ),
+        updateContainer: this.updateSubplot,
+        deleteContainer: this.deleteSubplot,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
+    updateSubplot(update) {
+      const newUpdate = {};
+      for (const key in update) {
+        const newKey = key
+          .replace('xaxis', this.props.xaxis)
+          .replace('yaxis', this.props.yaxis);
+        newUpdate[newKey] = update[key];
+      }
+      this.context.updateContainer(newUpdate);
+    }
+
+    render() {
+      return (
+        <WrappedComponent name={this.name} icon={this.icon} {...this.props} />
+      );
+    }
+  }
+
+  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(
+    WrappedComponent
+  )}`;
+
+  SubplotConnectedComponent.propTypes = {
+    xaxis: PropTypes.string.isRequired,
+    yaxis: PropTypes.string.isRequired,
+  };
+
+  SubplotConnectedComponent.contextTypes = {
+    container: PropTypes.object,
+    fullContainer: PropTypes.object,
+    data: PropTypes.array,
+    fullData: PropTypes.array,
+    onUpdate: PropTypes.func,
+    updateContainer: PropTypes.func,
+    getValObject: PropTypes.func,
+  };
+
+  SubplotConnectedComponent.childContextTypes = {
+    updateContainer: PropTypes.func,
+    deleteContainer: PropTypes.func,
+    container: PropTypes.object,
+    fullContainer: PropTypes.object,
+    getValObject: PropTypes.func,
+  };
+
+  const {plotly_editor_traits} = WrappedComponent;
+  SubplotConnectedComponent.plotly_editor_traits = plotly_editor_traits;
+
+  return SubplotConnectedComponent;
+}
diff --git a/src/lib/connectNonCartesianSubplotToLayout.js b/src/lib/connectNonCartesianSubplotToLayout.js
new file mode 100644
index 000000000..738b60b6c
--- /dev/null
+++ b/src/lib/connectNonCartesianSubplotToLayout.js
@@ -0,0 +1,124 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {
+  getDisplayName,
+  plotlyTraceToCustomTrace,
+  renderTraceIcon,
+} from '../lib';
+
+export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
+  class SubplotConnectedComponent extends Component {
+    constructor(props, context) {
+      super(props, context);
+
+      this.updateSubplot = this.updateSubplot.bind(this);
+      this.setLocals(props, context);
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+      this.setLocals(nextProps, nextContext);
+    }
+
+    setLocals(props, context) {
+      const {subplot, traceIndexes} = props;
+      const {container, fullContainer, data, fullData} = context;
+
+      this.container = container[subplot] || {};
+      this.fullContainer = fullContainer[subplot] || {};
+
+      const trace = traceIndexes.length > 0 ? data[traceIndexes[0]] : {};
+      let fullTrace = {};
+      for (let i = 0; i < fullData.length; i++) {
+        if (traceIndexes[0] === fullData[i]._fullInput.index) {
+          /*
+           * Fit transforms are custom transforms in our custom plotly.js bundle,
+           * they are different from others as they create an extra trace in the
+           * data array. When plotly.js runs supplyTraceDefaults (before the
+           * transforms code executes) it stores the result in _fullInput,
+           * so that we have a reference to what the original, corrected input was.
+           * Then the transform code runs, our figure changes accordingly, but
+           * we're still able to use the original input as it's in _fullInput.
+           * This is the desired behaviour for our transforms usually,
+           * but it is not useful for fits, as the transform code adds some styles
+           * that are useful for the trace, so really for fits we'd like to read
+           * from _fullData, not _fullInput. Here we're setting _fullInput to
+           * _fullData as that is where the rest of our code expects to find its
+           * values.
+          */
+          if (
+            trace.transforms &&
+            trace.transforms.every(t => t.type === 'fit')
+          ) {
+            fullData[i]._fullInput = fullData[i];
+          }
+
+          fullTrace = fullData[i]._fullInput;
+
+          break;
+        }
+      }
+
+      if (trace && fullTrace) {
+        this.icon = renderTraceIcon(plotlyTraceToCustomTrace(trace));
+        this.name = fullTrace.name;
+      }
+    }
+
+    getChildContext() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(`${this.props.subplot}.${attr}`),
+        updateContainer: this.updateSubplot,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
+    updateSubplot(update) {
+      const newUpdate = {};
+      for (const key in update) {
+        newUpdate[`${this.props.subplot}.${key}`] = update[key];
+      }
+      this.context.updateContainer(newUpdate);
+    }
+
+    render() {
+      return (
+        <WrappedComponent name={this.name} icon={this.icon} {...this.props} />
+      );
+    }
+  }
+
+  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(
+    WrappedComponent
+  )}`;
+
+  SubplotConnectedComponent.propTypes = {
+    subplot: PropTypes.string.isRequired,
+  };
+
+  SubplotConnectedComponent.contextTypes = {
+    container: PropTypes.object,
+    fullContainer: PropTypes.object,
+    data: PropTypes.array,
+    fullData: PropTypes.array,
+    onUpdate: PropTypes.func,
+    updateContainer: PropTypes.func,
+    getValObject: PropTypes.func,
+  };
+
+  SubplotConnectedComponent.childContextTypes = {
+    updateContainer: PropTypes.func,
+    deleteContainer: PropTypes.func,
+    container: PropTypes.object,
+    fullContainer: PropTypes.object,
+    getValObject: PropTypes.func,
+  };
+
+  const {plotly_editor_traits} = WrappedComponent;
+  SubplotConnectedComponent.plotly_editor_traits = plotly_editor_traits;
+
+  return SubplotConnectedComponent;
+}
diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js
index d0056a039..8cff167f4 100644
--- a/src/lib/connectTraceToPlot.js
+++ b/src/lib/connectTraceToPlot.js
@@ -5,9 +5,10 @@ import {
   getDisplayName,
   plotlyTraceToCustomTrace,
   renderTraceIcon,
+  traceTypeToAxisType,
 } from '../lib';
 import {deepCopyPublic, setMultiValuedContainer} from './multiValues';
-import {EDITOR_ACTIONS} from './constants';
+import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR} from 'lib/constants';
 
 export default function connectTraceToPlot(WrappedComponent) {
   class TraceConnectedComponent extends Component {
@@ -132,10 +133,61 @@ export default function connectTraceToPlot(WrappedComponent) {
     }
 
     deleteTrace() {
+      const currentTrace = this.context.fullData[this.props.traceIndexes[0]];
+      if (!currentTrace && this.context.onUpdate) {
+        this.context.onUpdate({
+          type: EDITOR_ACTIONS.DELETE_TRACE,
+          payload: {
+            traceIndexes: this.props.traceIndexes,
+          },
+        });
+        return;
+      }
+      const axesToBeGarbageCollected = [];
+      let subplotToBeGarbageCollected = null;
+      const subplotType = traceTypeToAxisType(currentTrace.type);
+
+      if (subplotType) {
+        const subplotNames =
+          subplotType === 'cartesian'
+            ? [currentTrace.xaxis || 'xaxis', currentTrace.yaxis || 'yaxis']
+            : currentTrace[SUBPLOT_TO_ATTR[subplotType].data] ||
+              SUBPLOT_TO_ATTR[subplotType].data;
+
+        const isSubplotUsedAnywhereElse = (subplotType, subplotName) =>
+          this.context.fullData.some(
+            trace =>
+              (trace[SUBPLOT_TO_ATTR[subplotType].data] === subplotName ||
+                (((subplotType === 'xaxis' || subplotType === 'yaxis') &&
+                  subplotName.charAt(1)) === '' ||
+                  (subplotName.split(subplotType)[1] === '' &&
+                    trace[SUBPLOT_TO_ATTR[subplotType].data] === null))) &&
+              trace.index !== this.props.traceIndexes[0]
+          );
+
+        // When we delete a subplot, make sure no unused axes/subplots are left
+        if (subplotType === 'cartesian') {
+          if (!isSubplotUsedAnywhereElse('xaxis', subplotNames[0])) {
+            axesToBeGarbageCollected.push(subplotNames[0]);
+          }
+          if (!isSubplotUsedAnywhereElse('yaxis', subplotNames[1])) {
+            axesToBeGarbageCollected.push(subplotNames[1]);
+          }
+        } else {
+          if (!isSubplotUsedAnywhereElse(subplotType, subplotNames)) {
+            subplotToBeGarbageCollected = subplotNames;
+          }
+        }
+      }
+
       if (this.context.onUpdate) {
         this.context.onUpdate({
           type: EDITOR_ACTIONS.DELETE_TRACE,
-          payload: {traceIndexes: this.props.traceIndexes},
+          payload: {
+            axesToBeGarbageCollected,
+            subplotToBeGarbageCollected,
+            traceIndexes: this.props.traceIndexes,
+          },
         });
       }
     }
diff --git a/src/lib/constants.js b/src/lib/constants.js
index be1b4812c..3439b3e1b 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -76,6 +76,19 @@ export const TRACE_TO_AXIS = {
   polar: ['scatterpolar', 'scatterpolargl'],
 };
 
+// Note: scene, and xaxis/yaxis were added for convenience sake even though they're not subplot types
+export const SUBPLOT_TO_ATTR = {
+  cartesian: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
+  xaxis: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
+  yaxis: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
+  ternary: {data: 'subplot', layout: 'ternary'},
+  gl3d: {data: 'scene', layout: 'scene'},
+  scene: {data: 'scene', layout: 'scene'},
+  geo: {data: 'geo', layout: 'geo'},
+  mapbox: {data: 'subplot', layout: 'mapbox'},
+  polar: {data: 'subplot', layout: 'polar'},
+};
+
 export const TRANSFORMS_LIST = ['filter', 'groupby', 'aggregate'];
 
 export const COLORS = {
diff --git a/src/lib/getAllAxes.js b/src/lib/getAllAxes.js
index 119fd5df3..d9eb0f45e 100644
--- a/src/lib/getAllAxes.js
+++ b/src/lib/getAllAxes.js
@@ -43,11 +43,16 @@ export default function getAllAxes(fullLayout) {
   return axes;
 }
 
-export function traceTypeToAxisType(traceType) {
+export function traceTypeToAxisType(traceType, subplot = false) {
   let category = null;
+  const traceToAxis = TRACE_TO_AXIS;
+  if (subplot) {
+    Object.assign(traceToAxis, TRACE_TO_AXIS, {scene: TRACE_TO_AXIS.gl3d});
+    delete traceToAxis.gl3d;
+  }
 
-  Object.keys(TRACE_TO_AXIS).forEach(c => {
-    if (TRACE_TO_AXIS[c].includes(traceType)) {
+  Object.keys(traceToAxis).forEach(c => {
+    if (traceToAxis[c].includes(traceType)) {
       category = c;
     }
   });
@@ -56,11 +61,7 @@ export function traceTypeToAxisType(traceType) {
     return category;
   }
 
-  if (traceType === 'pie') {
-    return null;
-  }
-
-  if (traceType === 'table') {
+  if (traceType === 'pie' || traceType === 'table') {
     return null;
   }
 
@@ -82,9 +83,9 @@ function getSubplotNumber(axis) {
 
 export function getAxisTitle(axis) {
   const axisType = capitalize(axis._name.split('axis')[0]);
-  const subplotNb = getSubplotNumber(axis) || 1;
+  const subplotNumber = getSubplotNumber(axis) || 1;
 
   return axis._input && axis._input.title
     ? striptags(`${axisType}: ${axis._input.title}`)
-    : striptags(`${axisType} ${subplotNb}`);
+    : striptags(`${axisType} ${subplotNumber}`);
 }
diff --git a/src/lib/getAllSubplots.js b/src/lib/getAllSubplots.js
new file mode 100644
index 000000000..4383d3668
--- /dev/null
+++ b/src/lib/getAllSubplots.js
@@ -0,0 +1,81 @@
+import {TRACE_TO_AXIS} from 'lib/constants';
+import {capitalize} from 'lib';
+
+export default function getAllSubplots(fullLayout) {
+  const axes = [];
+  // Plotly.js should really have a helper function for this, but until it does..
+  if (fullLayout && fullLayout._subplots) {
+    Object.keys(fullLayout._subplots)
+      .filter(
+        // xaxis and yaxis already included separately in _fullLayout._subplots
+        type => type !== 'cartesian' && fullLayout._subplots[type].length !== 0
+      )
+      .forEach(type => {
+        fullLayout._subplots[type].forEach(subplot => {
+          if (['xaxis', 'yaxis'].includes(type)) {
+            // subplot will look like x2, x45, convert it to xaxis2, xaxis45
+            subplot = // eslint-disable-line no-param-reassign
+              subplot.length > 1
+                ? subplot.slice(0, 1) + 'axis' + subplot.slice(1)
+                : subplot + 'axis';
+
+            fullLayout[subplot]._subplot = subplot;
+            fullLayout[subplot]._axisGroup = type;
+            axes.push(fullLayout[subplot]);
+          } else {
+            Object.keys(fullLayout[subplot])
+              .filter(key => key.includes('axis'))
+              .forEach(axis => {
+                fullLayout[subplot][axis]._subplot = subplot;
+                fullLayout[subplot][axis]._axisGroup = type;
+
+                // it should be in plotly.js, but it's not there for geo axes..
+                if (!fullLayout[subplot][axis]._name) {
+                  fullLayout[subplot][axis]._name = axis;
+                }
+                axes.push(fullLayout[subplot][axis]);
+              });
+          }
+        });
+      });
+  }
+
+  return axes;
+}
+
+export function traceTypeToSubplotType(traceType, subplot = false) {
+  let category = null;
+  const traceToAxis = TRACE_TO_AXIS;
+  if (subplot) {
+    Object.assign(traceToAxis, TRACE_TO_AXIS, {scene: TRACE_TO_AXIS.gl3d});
+    delete traceToAxis.gl3d;
+  }
+
+  Object.keys(traceToAxis).forEach(c => {
+    if (traceToAxis[c].includes(traceType)) {
+      category = c;
+    }
+  });
+
+  if (category) {
+    return category;
+  }
+
+  if (traceType === 'pie' || traceType === 'table') {
+    return null;
+  }
+
+  throw new Error(`Sorry, could not find ${traceType} in any category.`);
+}
+
+function getSubplotNumber(subplot, type) {
+  return Number(subplot.split(type)[1]);
+}
+
+export function getSubplotTitle(subplot, type) {
+  const axisType = capitalize(type === 'gl3d' ? 'scene' : type);
+  const subplotNumber =
+    getSubplotNumber(subplot, type === 'gl3d' ? 'scene' : type) || '';
+
+  return `${axisType} ${subplotNumber}`;
+}
diff --git a/src/lib/index.js b/src/lib/index.js
index 9402208a2..a97668d4d 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,4 +1,6 @@
 import bem from './bem';
+import connectCartesianSubplotToLayout from './connectCartesianSubplotToLayout';
+import connectNonCartesianSubplotToLayout from './connectNonCartesianSubplotToLayout';
 import connectAnnotationToLayout from './connectAnnotationToLayout';
 import connectShapeToLayout from './connectShapeToLayout';
 import connectSliderToLayout from './connectSliderToLayout';
@@ -20,6 +22,10 @@ import getAllAxes, {
   traceTypeToAxisType,
   getAxisTitle,
 } from './getAllAxes';
+import getAllSubplots, {
+  traceTypeToSubplotType,
+  getSubplotTitle,
+} from './getAllSubplots';
 import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
@@ -216,6 +222,8 @@ export {
   camelCase,
   pascalCase,
   clamp,
+  connectCartesianSubplotToLayout,
+  connectNonCartesianSubplotToLayout,
   connectAnnotationToLayout,
   connectShapeToLayout,
   connectSliderToLayout,
@@ -234,6 +242,9 @@ export {
   dereference,
   getAllAxes,
   getAxisTitle,
+  getAllSubplots,
+  traceTypeToSubplotType,
+  getSubplotTitle,
   getDisplayName,
   isPlainObject,
   localize,
diff --git a/src/shame.js b/src/shame.js
index a1d389df9..3cce484f3 100644
--- a/src/shame.js
+++ b/src/shame.js
@@ -45,27 +45,30 @@ function clearAxisTypes(gd, traces) {
 }
 
 export const shamefullyAdjustAxisRef = (graphDiv, payload) => {
-  if (payload.tracesNeedingAxisAdjustment) {
-    payload.tracesNeedingAxisAdjustment.forEach(trace => {
-      const axis = trace[payload.axisAttrToAdjust].charAt(0);
-      const currentAxisIdNumber = Number(
-        trace[payload.axisAttrToAdjust].slice(1)
-      );
-      const adjustedAxisIdNumber = currentAxisIdNumber - 1;
-
-      const currentAxisLayoutProperties = {
-        ...graphDiv.layout[payload.axisAttrToAdjust + currentAxisIdNumber],
-      };
-
-      // for cases when we're adjusting x2 => x, so that it becomes x not x1
-      graphDiv.data[trace.index][payload.axisAttrToAdjust] =
-        adjustedAxisIdNumber === 1 ? axis : axis + adjustedAxisIdNumber;
+  if (payload.axesToBeGarbageCollected) {
+    payload.axesToBeGarbageCollected.forEach(a => {
+      const axis = a.charAt(0);
+      const axisIdNumber = Number(a.slice(1));
 
-      graphDiv.layout[
-        payload.axisAttrToAdjust + adjustedAxisIdNumber
-      ] = currentAxisLayoutProperties;
+      nestedProperty(graphDiv.layout, `${axis}axis${axisIdNumber || ''}`).set(
+        null
+      );
+      Object.keys(graphDiv.layout)
+        .filter(key => key.startsWith(axis + 'axis'))
+        .forEach(key => {
+          if (
+            nestedProperty(graphDiv.layout, `${key}.overlaying`).get() === a
+          ) {
+            nestedProperty(graphDiv.layout, `${key}.overlaying`).set(null);
+          }
+        });
     });
   }
+  if (payload.subplotToBeGarbageCollected) {
+    nestedProperty(graphDiv.layout, payload.subplotToBeGarbageCollected).set(
+      null
+    );
+  }
 };
 
 export const shamefullyAdjustGeo = ({layout: {geo = {}}}, {update}) => {
diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss
index f80c638e0..85299f62e 100644
--- a/src/styles/components/fields/_field.scss
+++ b/src/styles/components/fields/_field.scss
@@ -76,6 +76,22 @@
       }
     }
   }
+
+  .rect,
+  .square {
+    border-color: var(--color-accent);
+  }
+  .rect-grid {
+    border-color: var(--panel-background) !important;
+    float: left;
+    border-top: 1px solid;
+    border-left: 1px solid;
+  }
+  .rect-container {
+    margin: var(--spacing-eighth-unit) auto var(--spacing-quarter-unit) auto;
+    position: relative;
+    max-width: 294px;
+  }
 }
 
 .field .field {