diff --git a/src/PlotlyEditor.js b/src/PlotlyEditor.js
index 7fc1c4f9f..f4df4c4e3 100644
--- a/src/PlotlyEditor.js
+++ b/src/PlotlyEditor.js
@@ -2,7 +2,7 @@ import DefaultEditor from './DefaultEditor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {bem} from './lib';
-import {noShame, maybeClearAxisTypes} from './shame';
+import {maybeClearAxisTypes} from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
@@ -11,8 +11,6 @@ class PlotlyEditor extends Component {
   constructor(props, context) {
     super(props, context);
 
-    noShame({plotly: this.props.plotly});
-
     // we only need to compute this once.
     if (this.props.plotly) {
       this.plotSchema = this.props.plotly.PlotSchema.get();
@@ -102,6 +100,31 @@ class PlotlyEditor extends Component {
         }
         break;
 
+      case EDITOR_ACTIONS.UPDATE_AXIS_REFERENCES:
+        payload.tracesToAdjust.forEach(trace => {
+          const axis = trace[payload.attrToAdjust].charAt(0);
+          // n.b: currentAxisIdNumber will never be 0, i.e. Number('x'.slice(1)),
+          // because payload.tracesToAdjust is a filter of all traces that have
+          // an axis ID above the one of the axis ID we deprecated
+          const currentAxisIdNumber = Number(
+            trace[payload.attrToAdjust].slice(1)
+          );
+          const adjustedAxisIdNumber = currentAxisIdNumber - 1;
+
+          const currentAxisLayoutProperties = {
+            ...graphDiv.layout[payload.attrToAdjust + currentAxisIdNumber],
+          };
+
+          graphDiv.data[trace.index][payload.attrToAdjust] =
+            // for cases when we're adjusting x2 => x, so that it becomes x not x1
+            adjustedAxisIdNumber === 1 ? axis : axis + adjustedAxisIdNumber;
+
+          graphDiv.layout[
+            payload.attrToAdjust + adjustedAxisIdNumber
+          ] = currentAxisLayoutProperties;
+        });
+        break;
+
       case EDITOR_ACTIONS.ADD_TRACE:
         if (this.props.beforeAddTrace) {
           this.props.beforeAddTrace(payload);
diff --git a/src/components/containers/ImageAccordion.js b/src/components/containers/ImageAccordion.js
index 850db31d8..c3c963318 100644
--- a/src/components/containers/ImageAccordion.js
+++ b/src/components/containers/ImageAccordion.js
@@ -13,8 +13,8 @@ class ImageAccordion extends Component {
 
     const content =
       images.length &&
-      images.map((ann, i) => (
-        <ImageFold key={i} imageIndex={i} name={ann.text} canDelete={canAdd}>
+      images.map((img, i) => (
+        <ImageFold key={i} imageIndex={i} name={img.text} canDelete={canAdd}>
           {children}
         </ImageFold>
       ));
diff --git a/src/components/containers/Section.js b/src/components/containers/Section.js
index 82a8ef22b..ff0f28512 100644
--- a/src/components/containers/Section.js
+++ b/src/components/containers/Section.js
@@ -1,10 +1,10 @@
-import Info from '../fields/Info';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import {
   containerConnectedContextTypes,
   localize,
   unpackPlotProps,
+  traceTypeToAxisType,
 } from '../../lib';
 
 class Section extends Component {
@@ -36,7 +36,23 @@ class Section extends Component {
         return null;
       }
 
-      if (child.props.attr) {
+      if ((child.type.plotly_editor_traits || {}).is_axis_creator) {
+        const {data, fullContainer} = this.context;
+
+        // for now, only allowing for cartesian chart types
+        if (
+          data.length > 1 &&
+          traceTypeToAxisType(data[fullContainer.index].type) === 'cartesian'
+        ) {
+          this.sectionVisible = true;
+          return cloneElement(child, {
+            isVisible: true,
+            container: this.context.container,
+            fullContainer: this.context.fullContainer,
+          });
+        }
+        this.sectionVisible = false;
+      } else if (child.props.attr) {
         let plotProps;
         if (child.type.supplyPlotProps) {
           plotProps = child.type.supplyPlotProps(child.props, nextContext);
@@ -51,7 +67,9 @@ class Section extends Component {
         // it will see plotProps and skip recomputing them.
         this.sectionVisible = this.sectionVisible || plotProps.isVisible;
         return cloneElement(child, {plotProps});
-      } else if (child.type !== Info) {
+      } else if (
+        !(child.type.plotly_editor_traits || {}).no_visibility_forcing
+      ) {
         // custom UI other than Info forces section visibility.
         this.sectionVisible = true;
       }
diff --git a/src/components/containers/ShapeAccordion.js b/src/components/containers/ShapeAccordion.js
index d3f872379..43f8db002 100644
--- a/src/components/containers/ShapeAccordion.js
+++ b/src/components/containers/ShapeAccordion.js
@@ -13,8 +13,8 @@ class ShapeAccordion extends Component {
 
     const content =
       shapes.length &&
-      shapes.map((ann, i) => (
-        <ShapeFold key={i} shapeIndex={i} name={ann.text} canDelete={canAdd}>
+      shapes.map((shp, i) => (
+        <ShapeFold key={i} shapeIndex={i} name={shp.text} canDelete={canAdd}>
           {children}
         </ShapeFold>
       ));
diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js
index 20af4504c..edaadb564 100644
--- a/src/components/fields/AxesSelector.js
+++ b/src/components/fields/AxesSelector.js
@@ -1,9 +1,11 @@
 import Field from './Field';
 import PropTypes from 'prop-types';
+import Dropdown from '../widgets/Dropdown';
 import RadioBlocks from '../widgets/RadioBlocks';
 import React, {Component} from 'react';
+import {localize} from 'lib';
 
-export default class AxesSelector extends Component {
+class AxesSelector extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -16,6 +18,37 @@ export default class AxesSelector extends Component {
 
   render() {
     const {axesTargetHandler, axesOptions, axesTarget} = this.context;
+    const {localize: _} = this.props;
+    const hasSecondaryAxis =
+      axesOptions &&
+      axesOptions.some(option => {
+        return (
+          option.axisGroup &&
+          this.context.fullLayout._subplots[option.axisGroup].length > 1
+        );
+      });
+
+    if (hasSecondaryAxis) {
+      return (
+        <Field {...this.props} label={_('Axis to Style')}>
+          <Dropdown
+            options={axesOptions.map(option => {
+              if (option.value !== 'allaxes') {
+                return {
+                  label: option.title,
+                  value: option.value,
+                };
+              }
+
+              return option;
+            })}
+            value={axesTarget}
+            onChange={axesTargetHandler}
+            clearable={false}
+          />
+        </Field>
+      );
+    }
 
     return (
       <Field {...this.props} center>
@@ -33,4 +66,11 @@ AxesSelector.contextTypes = {
   axesTargetHandler: PropTypes.func,
   axesOptions: PropTypes.array,
   axesTarget: PropTypes.string,
+  fullLayout: PropTypes.object,
 };
+
+AxesSelector.propTypes = {
+  localize: PropTypes.func,
+};
+
+export default localize(AxesSelector);
diff --git a/src/components/fields/AxisCreator.js b/src/components/fields/AxisCreator.js
new file mode 100644
index 000000000..58cda7a14
--- /dev/null
+++ b/src/components/fields/AxisCreator.js
@@ -0,0 +1,195 @@
+import Dropdown from './Dropdown';
+import Info from './Info';
+import PropTypes from 'prop-types';
+import React, {Component, Fragment} from 'react';
+import {EDITOR_ACTIONS} from 'lib/constants';
+import Button from '../widgets/Button';
+import {PlusIcon} from 'plotly-icons';
+import {
+  connectToContainer,
+  localize,
+  traceTypeToAxisType,
+  getAxisTitle,
+  axisIdToAxisName,
+} from 'lib';
+
+class UnconnectedNewAxisCreator 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
+    );
+  }
+
+  updateAxis() {
+    const {attr, updateContainer} = this.props;
+    const {onUpdate, fullLayout} = this.context;
+
+    updateContainer({
+      [attr]: attr.charAt(0) + (fullLayout._subplots[attr].length + 1),
+    });
+
+    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',
+          },
+        },
+      });
+    }
+
+    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',
+          },
+        },
+      });
+    }
+  }
+
+  recalcAxes(update) {
+    const currentAxisId = this.props.fullContainer[this.props.attr];
+
+    // When we select another axis, make sure no unused axes are left:
+    // does any other trace have this axisID? If so, nothing needs to change
+    if (
+      this.context.fullData.some(
+        t =>
+          t[this.props.attr] === currentAxisId &&
+          t.index !== this.props.fullContainer.index
+      )
+    ) {
+      this.props.updateContainer({[this.props.attr]: update});
+      return;
+    }
+
+    // if not, send action to readjust axis references in trace data and layout
+    const tracesToAdjust = this.context.fullData.filter(
+      trace =>
+        Number(trace[this.props.attr].slice(1)) > Number(currentAxisId.slice(1))
+    );
+
+    this.context.onUpdate({
+      type: EDITOR_ACTIONS.UPDATE_AXIS_REFERENCES,
+      payload: {tracesToAdjust, attrToAdjust: this.props.attr},
+    });
+
+    this.props.updateContainer({[this.props.attr]: update});
+  }
+
+  render() {
+    const icon = <PlusIcon />;
+    const extraComponent = this.canAddAxis() ? (
+      <Button variant="no-text" icon={icon} onClick={() => this.updateAxis()} />
+    ) : (
+      <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.recalcAxes(u)}
+        extraComponent={extraComponent}
+      />
+    );
+  }
+}
+
+UnconnectedNewAxisCreator.propTypes = {
+  attr: PropTypes.string,
+  label: PropTypes.string,
+  options: PropTypes.array,
+  canAddAxis: PropTypes.bool,
+  localize: PropTypes.func,
+  container: PropTypes.object,
+  fullContainer: PropTypes.object,
+  updateContainer: PropTypes.func,
+};
+
+UnconnectedNewAxisCreator.contextTypes = {
+  fullLayout: PropTypes.object,
+  data: PropTypes.array,
+  fullData: PropTypes.array,
+  onUpdate: PropTypes.func,
+};
+
+const ConnectedNewAxisCreator = connectToContainer(UnconnectedNewAxisCreator);
+
+class AxisCreator extends Component {
+  render() {
+    const isFirstTraceOfType =
+      this.context.data.filter(d => d.type === this.props.container.type)
+        .length === 1;
+
+    if (isFirstTraceOfType) {
+      return null;
+    }
+
+    const {localize: _} = this.props;
+    const {fullLayout} = this.context;
+    const axisType = traceTypeToAxisType(this.props.container.type);
+    const controls = [];
+
+    function getOptions(axisType) {
+      return fullLayout._subplots[axisType].map(axisId => ({
+        label: getAxisTitle(fullLayout[axisIdToAxisName(axisId)]),
+        value: axisId,
+      }));
+    }
+
+    // for the moment only cartesian subplots are supported
+    if (axisType === 'cartesian') {
+      ['xaxis', 'yaxis'].forEach((type, index) => {
+        controls.push(
+          <ConnectedNewAxisCreator
+            key={index}
+            attr={type}
+            label={type.charAt(0).toUpperCase() + ' Axis'}
+            options={getOptions(type)}
+            localize={_}
+          />
+        );
+      });
+    }
+
+    return (
+      <Fragment>
+        {controls}
+        <Info>
+          {_('You can style and position your axes in the Style > Axes Panel')}
+        </Info>
+      </Fragment>
+    );
+  }
+}
+
+AxisCreator.propTypes = {
+  localize: PropTypes.func,
+  container: PropTypes.object,
+  fullContainer: PropTypes.object,
+};
+
+AxisCreator.plotly_editor_traits = {
+  is_axis_creator: true,
+};
+
+AxisCreator.contextTypes = {
+  data: PropTypes.array,
+  fullData: PropTypes.array,
+  fullLayout: PropTypes.object,
+};
+
+export default localize(connectToContainer(AxisCreator));
diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js
index e3600c6de..f5d7ebc4e 100644
--- a/src/components/fields/Field.js
+++ b/src/components/fields/Field.js
@@ -26,6 +26,7 @@ class Field extends Component {
       localize: _,
       multiValued,
       units,
+      extraComponent,
     } = this.props;
 
     let fieldClass;
@@ -57,6 +58,7 @@ class Field extends Component {
               </div>
             </MenuPanel>
           ) : null}
+          {extraComponent ? extraComponent : null}
         </div>
         {units ? (
           <div className={bem('field', 'units')}>
@@ -75,6 +77,7 @@ Field.propTypes = {
   units: PropTypes.string,
   multiValued: PropTypes.bool,
   children: PropTypes.node,
+  extraComponent: PropTypes.any,
 };
 
 Field.defaultProps = {
diff --git a/src/components/fields/Info.js b/src/components/fields/Info.js
index a3cd6734f..053b669b8 100644
--- a/src/components/fields/Info.js
+++ b/src/components/fields/Info.js
@@ -7,6 +7,10 @@ export default class Info extends Component {
   }
 }
 
+Info.plotly_editor_traits = {
+  no_visibility_forcing: true,
+};
+
 Info.propTypes = {
   ...Field.propTypes,
 };
diff --git a/src/components/fields/__tests__/AnnotationRef-test.js b/src/components/fields/__tests__/AnnotationRef-test.js
index 907b28b7a..1958000a8 100644
--- a/src/components/fields/__tests__/AnnotationRef-test.js
+++ b/src/components/fields/__tests__/AnnotationRef-test.js
@@ -27,8 +27,8 @@ describe('<AnnotationRef>', () => {
     const options = drop.first().prop('options');
     expect(options.length).toBe(3);
     expect(options[0]).toEqual({label: 'Canvas', value: 'paper'});
-    expect(options[1]).toEqual({label: 'y', value: 'y'});
-    expect(options[2]).toEqual({label: 'yaxis2 title', value: 'y2'});
+    expect(options[1]).toEqual({label: 'Y', value: 'y'});
+    expect(options[2]).toEqual({label: 'Y Axis: yaxis2 title', value: 'y2'});
   });
 
   it('sends update for a[x|y]ref attr on [x|y]ref change', () => {
@@ -114,7 +114,7 @@ describe('<AnnotationArrowRef>', () => {
     const options = drop.first().prop('options');
     expect(options.length).toBe(3);
     expect(options[0]).toEqual({label: 'in pixels', value: 'pixel'});
-    expect(options[1]).toEqual({label: 'y', value: 'y'});
-    expect(options[2]).toEqual({label: 'yaxis2 title', value: 'y2'});
+    expect(options[1]).toEqual({label: 'Y', value: 'y'});
+    expect(options[2]).toEqual({label: 'Y Axis: yaxis2 title', value: 'y2'});
   });
 });
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 59ce5dbf0..f6f7a0a58 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -6,10 +6,112 @@ import {UnconnectedRadio} from './Radio';
 import {
   connectLayoutToPlot,
   connectToContainer,
+  getAllAxes,
+  getAxisTitle,
+  axisIdToAxisName,
   supplyLayoutPlotProps,
-  striptags,
 } from 'lib';
 
+export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = props;
+    let options = [];
+
+    if (
+      plotProps.fullContainer._subplot &&
+      plotProps.fullContainer._subplot.includes('xaxis')
+    ) {
+      options = context.fullLayout._subplots.yaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    } else if (
+      plotProps.fullContainer._subplot &&
+      plotProps.fullContainer._subplot.includes('yaxis')
+    ) {
+      options = context.fullLayout._subplots.xaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    }
+    options.push({label: _('Free'), value: 'free'});
+    plotProps.options = options;
+    plotProps.clearable = false;
+  },
+});
+
+export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    let options = [];
+    if (
+      plotProps.fullContainer._subplot &&
+      plotProps.fullContainer._subplot.includes('xaxis')
+    ) {
+      options = context.fullLayout._subplots.xaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    } else if (
+      plotProps.fullContainer._subplot &&
+      plotProps.fullContainer._subplot.includes('yaxis')
+    ) {
+      options = context.fullLayout._subplots.yaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    }
+
+    // filter out the current axisID, can't overlay over itself
+    plotProps.options = options.filter(
+      option => context.fullContainer._id !== option.value
+    );
+
+    plotProps.clearable = true;
+  },
+});
+
+export const AxisSide = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const _ = props.localize;
+    if (
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('y')
+    ) {
+      plotProps.options = [
+        {label: _('Left'), value: 'left'},
+        {label: _('Right'), value: 'right'},
+      ];
+      return;
+    }
+
+    if (
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('x')
+    ) {
+      plotProps.options = [
+        {label: _('Bottom'), value: 'bottom'},
+        {label: _('Top'), value: 'top'},
+      ];
+      return;
+    }
+
+    plotProps.options = [
+      {label: _('Left'), value: 'left'},
+      {label: _('Right'), value: 'right'},
+      {label: _('Bottom'), value: 'bottom'},
+      {label: _('Top'), value: 'top'},
+    ];
+  },
+});
+
 export const CanvasSize = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer, updateContainer, container} = plotProps;
@@ -135,6 +237,18 @@ export const NumericFraction = connectToContainer(UnconnectedNumericFraction, {
   modifyPlotProps: numericFractionModifyPlotProps,
 });
 
+export const NumericFractionDomain = connectToContainer(
+  UnconnectedNumericFraction,
+  {
+    modifyPlotProps: (props, context, plotProps) => {
+      numericFractionModifyPlotProps(props, context, plotProps);
+      if (context.container.overlaying) {
+        plotProps.isVisible = null;
+      }
+    },
+  }
+);
+
 export const LayoutNumericFraction = connectLayoutToPlot(
   connectToContainer(UnconnectedNumericFraction, {
     supplyPlotProps: supplyLayoutPlotProps,
@@ -175,7 +289,7 @@ export const LayoutNumericFractionInverse = connectLayoutToPlot(
 
 export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {fullContainer: {xref, yref}, plotly, graphDiv} = context;
+    const {fullContainer: {xref, yref}} = context;
 
     let currentAxisRef;
     if (props.attr === 'axref') {
@@ -191,11 +305,10 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
 
     if (currentAxisRef === 'paper') {
       // If currentAxesRef is paper provide all axes options to user.
+
       plotProps.options = [
         {label: 'in pixels', value: 'pixel'},
-        ...computeAxesRefOptions(
-          plotly.Axes.list(graphDiv, props.attr.charAt(1))
-        ),
+        ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
       ];
     } else {
       // If currentAxesRef is an actual axes then offer that value as the only
@@ -212,7 +325,7 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
 
 export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {fullContainer: {axref, ayref}, graphDiv, plotly} = context;
+    const {fullContainer: {axref, ayref}} = context;
 
     let currentOffsetRef;
     if (props.attr === 'xref') {
@@ -228,9 +341,7 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
 
     plotProps.options = [
       {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(
-        plotly.Axes.list(graphDiv, props.attr.charAt(0))
-      ),
+      ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
     ];
 
     if (currentOffsetRef !== 'pixel') {
@@ -259,13 +370,9 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
 
 export const PositioningRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    const {graphDiv, plotly} = context;
-
     plotProps.options = [
       {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(
-        plotly.Axes.list(graphDiv, props.attr.charAt(0))
-      ),
+      ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
     ];
 
     plotProps.clearable = false;
@@ -300,14 +407,17 @@ export const PositioningNumeric = connectToContainer(UnconnectedNumeric, {
   },
 });
 
-function computeAxesRefOptions(axes) {
+function computeAxesRefOptions(axes, propsAttr) {
   const options = [];
   for (let i = 0; i < axes.length; i++) {
     const ax = axes[i];
-
-    // checking user data for title avoids default "Click to enter axis title"
-    const label = striptags(ax._input.title || ax._id);
-    options[i] = {label, value: ax._id};
+    if (
+      ax._id.charAt(0) === propsAttr.charAt(0) ||
+      ax._id.charAt(0) === propsAttr.charAt(1)
+    ) {
+      const label = getAxisTitle(ax);
+      options.push({label, value: ax._id});
+    }
   }
 
   return options;
diff --git a/src/components/fields/index.js b/src/components/fields/index.js
index 053742ba3..566002e25 100644
--- a/src/components/fields/index.js
+++ b/src/components/fields/index.js
@@ -13,11 +13,13 @@ import Numeric from './Numeric';
 import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
 import ErrorBars from './ErrorBars';
+import AxisCreator from './AxisCreator';
 import {
   AnnotationArrowRef,
   AnnotationRef,
   PositioningRef,
   AxesRange,
+  AxisAnchorDropdown,
   CanvasSize,
   ContourNumeric,
   FillDropdown,
@@ -25,17 +27,21 @@ import {
   GeoScope,
   HoverInfo,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   TraceOrientation,
+  AxisOverlayDropdown,
+  AxisSide,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './lineSelectors';
 
 export {
   AnnotationArrowRef,
   AnnotationRef,
+  AxisAnchorDropdown,
   PositioningRef,
   ArrowSelector,
   AxesRange,
@@ -57,6 +63,7 @@ export {
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   NumericFraction,
+  NumericFractionDomain,
   NumericFractionInverse,
   PositioningNumeric,
   LineDashSelector,
@@ -67,4 +74,7 @@ export {
   TextEditor,
   TraceOrientation,
   TraceSelector,
+  AxisCreator,
+  AxisOverlayDropdown,
+  AxisSide,
 };
diff --git a/src/components/index.js b/src/components/index.js
index e950d48fc..2a1ecf141 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,9 @@
 import {
   AnnotationArrowRef,
   AnnotationRef,
+  AxisAnchorDropdown,
+  AxisOverlayDropdown,
+  AxisSide,
   PositioningRef,
   ArrowSelector,
   AxesRange,
@@ -22,12 +25,14 @@ import {
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LineDashSelector,
   LineShapeSelector,
   Numeric,
   Radio,
+  AxisCreator,
   SymbolSelector,
   TextEditor,
   TraceOrientation,
@@ -58,6 +63,9 @@ import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
   AnnotationAccordion,
+  AxisAnchorDropdown,
+  AxisOverlayDropdown,
+  AxisSide,
   ShapeAccordion,
   ImageAccordion,
   AnnotationArrowRef,
@@ -85,6 +93,7 @@ export {
   HoverInfo,
   Info,
   NumericFraction,
+  NumericFractionDomain,
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,
@@ -99,6 +108,7 @@ export {
   Radio,
   Section,
   SingleSidebarItem,
+  AxisCreator,
   SymbolSelector,
   TextEditor,
   TraceAccordion,
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index a29612f86..f332b1bb4 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -8,6 +8,7 @@ import {
   GeoScope,
   Radio,
   Section,
+  AxisCreator,
   TraceAccordion,
   TraceSelector,
   TextEditor,
@@ -63,6 +64,10 @@ const GraphCreatePanel = ({localize: _}) => {
         <DataSelector label={_('C')} attr="c" />
       </Section>
 
+      <Section name={_('Axes to Use')}>
+        <AxisCreator attr="fakeattr" />
+      </Section>
+
       <Section name={_('Error Bars X')}>
         <ErrorBars localize={_} attr="error_x" />
       </Section>
diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index 620459d67..549264e6a 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
+  AxisAnchorDropdown,
+  AxisOverlayDropdown,
+  AxisSide,
   AxesRange,
   ColorPicker,
   Dropdown,
   FontSelector,
   Numeric,
-  NumericFraction,
+  NumericFractionDomain,
   Radio,
   TextEditor,
   MenuPanel,
@@ -32,6 +35,27 @@ const StyleAxesPanel = ({localize: _}) => (
         <ColorPicker label={_('Font Color')} attr="titlefont.color" />
       </AxesFold>
 
+      <AxesFold name={_('Layout')}>
+        <Section name={_('Boundaries')} attr="domain[0]">
+          <AxisOverlayDropdown
+            label={_('Overlay')}
+            attr="overlaying"
+            localize={_}
+          />
+          <NumericFractionDomain label={_('Start Position')} attr="domain[0]" />
+          <NumericFractionDomain label={_('End Position')} attr="domain[1]" />
+        </Section>
+
+        <Section name={_('Anchor')}>
+          <AxisAnchorDropdown
+            label={_('Anchor To')}
+            attr="anchor"
+            localize={_}
+          />
+          <AxisSide label={_('Side')} attr="side" localize={_} />
+        </Section>
+      </AxesFold>
+
       <AxesFold name={_('Range')}>
         <Section name={_('Selection')} attr="autorange">
           <Radio
@@ -291,24 +315,6 @@ const StyleAxesPanel = ({localize: _}) => (
           ]}
         />
       </AxesFold>
-      <AxesFold name={_('Layout')}>
-        <Section name={_('Axis Width')} attr="domain[0]">
-          <NumericFraction label={_('Start Position')} attr="domain[0]" />
-          <NumericFraction label={_('End Position')} attr="domain[1]" />
-        </Section>
-        <Section name={_('Positioning')}>
-          <Radio
-            label={_('Side')}
-            attr="side"
-            options={[
-              {label: _('Bottom'), value: 'bottom'},
-              {label: _('Top'), value: 'top'},
-              {label: _('Left'), value: 'left'},
-              {label: _('Right'), value: 'right'},
-            ]}
-          />
-        </Section>
-      </AxesFold>
 
       <AxesFold name={_('Hover Projections')}>
         <Radio
diff --git a/src/lib/__tests__/multiValued-test.js b/src/lib/__tests__/multiValued-test.js
index 55ac08230..d0ed601eb 100644
--- a/src/lib/__tests__/multiValued-test.js
+++ b/src/lib/__tests__/multiValued-test.js
@@ -7,7 +7,7 @@ import {connectLayoutToPlot, connectAxesToLayout} from '..';
 import {mount} from 'enzyme';
 
 describe('multiValued Numeric', () => {
-  it.only('uses placeholder and empty string value', () => {
+  it('uses placeholder and empty string value', () => {
     const fixtureProps = fixtures.scatter({
       layout: {xaxis: {range: [0, 1]}, yaxis: {range: [-1, 1]}},
     });
diff --git a/src/lib/connectAxesToLayout.js b/src/lib/connectAxesToLayout.js
index 3b17d4b25..c8ed33154 100644
--- a/src/lib/connectAxesToLayout.js
+++ b/src/lib/connectAxesToLayout.js
@@ -2,15 +2,32 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {deepCopyPublic, setMultiValuedContainer} from './multiValues';
-import {getDisplayName, localize, capitalize} from '../lib';
+import {
+  capitalize,
+  getAllAxes,
+  getDisplayName,
+  localize,
+  getAxisTitle,
+} from '../lib';
 
 function computeAxesOptions(axes, _) {
   const options = [{label: _('All'), value: 'allaxes'}];
   for (let i = 0; i < axes.length; i++) {
     const ax = axes[i];
     const label = capitalize(ax._name.split('axis')[0]);
-    const value = (ax.prefix ? ax.prefix + '.' : '').trim() + ax._name;
-    options[i + 1] = {label, value};
+    const value = (ax._subplot &&
+    !ax._subplot.includes('xaxis') &&
+    !ax._subplot.includes('yaxis')
+      ? ax._subplot + '.' + ax._name
+      : ax._subplot
+    ).trim();
+
+    options[i + 1] = {
+      label,
+      value,
+      axisGroup: ax._axisGroup,
+      title: getAxisTitle(ax),
+    };
   }
 
   return options;
@@ -37,37 +54,7 @@ export default function connectAxesToLayout(WrappedComponent) {
       const {container, fullContainer} = nextContext;
       const {axesTarget} = nextState;
 
-      this.axes = [];
-
-      // Plotly.js should really have a helper function for this, but until it does..
-      Object.keys(fullContainer._subplots)
-        .filter(
-          // cartesian types will have xaxis or yaxis directly in _fullLayout
-          type =>
-            type !== 'cartesian' && fullContainer._subplots[type].length !== 0
-        )
-        .forEach(type => {
-          if (['xaxis', 'yaxis'].includes(type)) {
-            this.axes.push(fullContainer[type]);
-          }
-          if (!['xaxis', 'yaxis', 'cartesian'].includes(type)) {
-            this.axes = Object.keys(
-              fullContainer[fullContainer._subplots[type]]
-            )
-              .filter(key => key.includes('axis'))
-              .map(axis => {
-                // will take care of subplots after
-                const prefix = fullContainer._subplots[type][0];
-                fullContainer[prefix][axis].prefix = prefix;
-                if (!fullContainer[prefix][axis]._name) {
-                  // it should be in plotly.js, but it's not there for geo axes..
-                  fullContainer[prefix][axis]._name = axis;
-                }
-                return fullContainer[prefix][axis];
-              });
-          }
-        });
-
+      this.axes = getAllAxes(fullContainer);
       this.axesOptions = computeAxesOptions(this.axes, nextProps.localize);
 
       if (axesTarget === 'allaxes') {
@@ -118,11 +105,15 @@ export default function connectAxesToLayout(WrappedComponent) {
       const keys = Object.keys(update);
       for (let i = 0; i < keys.length; i++) {
         for (let j = 0; j < axes.length; j++) {
-          const prefix = axes[j].prefix;
+          const subplot = axes[j]._subplot;
           let axesKey = axes[j]._name;
 
-          if (prefix) {
-            axesKey = `${prefix}.${axesKey}`;
+          if (
+            subplot &&
+            !subplot.includes('xaxis') &&
+            !subplot.includes('yaxis')
+          ) {
+            axesKey = `${subplot}.${axesKey}`;
           }
 
           const newkey = `${axesKey}.${keys[i]}`;
diff --git a/src/lib/connectToContainer.js b/src/lib/connectToContainer.js
index 4e7b32b36..051a4ba6c 100644
--- a/src/lib/connectToContainer.js
+++ b/src/lib/connectToContainer.js
@@ -5,6 +5,7 @@ import {getDisplayName} from '../lib';
 
 export const containerConnectedContextTypes = {
   container: PropTypes.object,
+  data: PropTypes.array,
   defaultContainer: PropTypes.object,
   fullContainer: PropTypes.object,
   fullData: PropTypes.array,
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 4ec14e7d9..41a087781 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -32,6 +32,7 @@ export const EDITOR_ACTIONS = {
   UPDATE_TRACES: 'plotly-editor-update-traces',
   ADD_TRACE: 'plotly-editor-add-trace',
   DELETE_TRACE: 'plotly-editor-delete-trace',
+  UPDATE_AXIS_REFERENCES: 'plotly-editor-update-axis-references',
   UPDATE_LAYOUT: 'plotly-editor-update-layout',
   DELETE_ANNOTATION: 'plotly-editor-delete-annotation',
   DELETE_SHAPE: 'plotly-editor-delete-shape',
@@ -48,3 +49,19 @@ export const RETURN_KEY = 'Enter';
 export const ESCAPE_KEY = 'Escape';
 export const COMMAND_KEY = 'Meta';
 export const CONTROL_KEY = 'Control';
+
+export const TRACE_TO_AXIS = {
+  cartesian: [
+    'scatter',
+    'box',
+    'bar',
+    'heatmap',
+    'contour',
+    'ohlc',
+    'candlestick',
+  ],
+  ternary: ['scatterternary'],
+  gl3d: ['scatter3d', 'surface', 'mesh3d'],
+  geo: ['scattergeo', 'choropleth'],
+  mapbox: ['scattermapbox'],
+};
diff --git a/src/lib/getAllAxes.js b/src/lib/getAllAxes.js
new file mode 100644
index 000000000..539354599
--- /dev/null
+++ b/src/lib/getAllAxes.js
@@ -0,0 +1,75 @@
+import {TRACE_TO_AXIS} from 'lib/constants';
+import {capitalize, striptags} from 'lib';
+
+export default function getAllAxes(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 traceTypeToAxisType(traceType) {
+  let category = null;
+
+  Object.keys(TRACE_TO_AXIS).forEach(c => {
+    if (TRACE_TO_AXIS[c].includes(traceType)) {
+      category = c;
+    }
+  });
+
+  if (category) {
+    return category;
+  }
+
+  if (traceType === 'pie') {
+    return null;
+  }
+
+  throw new Error(`Sorry, could not find ${traceType} in any category.`);
+}
+
+export function axisIdToAxisName(id) {
+  return id.charAt(0) + 'axis' + id.slice(1);
+}
+
+export function getAxisTitle(axis) {
+  const axisType = capitalize(axis._name.split('axis')[0]);
+  return axis._input && axis._input.title
+    ? striptags(`${axisType} Axis: ${axis._input.title}`)
+    : capitalize(axis._id);
+}
diff --git a/src/lib/index.js b/src/lib/index.js
index 0a5816435..ace5747d8 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -10,6 +10,11 @@ import connectToContainer, {
 import connectTraceToPlot from './connectTraceToPlot';
 import dereference from './dereference';
 import findFullTraceIndex from './findFullTraceIndex';
+import getAllAxes, {
+  axisIdToAxisName,
+  traceTypeToAxisType,
+  getAxisTitle,
+} from './getAllAxes';
 import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
@@ -48,6 +53,7 @@ function renderTraceIcon(trace) {
 }
 
 export {
+  axisIdToAxisName,
   bem,
   capitalize,
   clamp,
@@ -62,6 +68,8 @@ export {
   traceTypeToPlotlyInitFigure,
   dereference,
   findFullTraceIndex,
+  getAllAxes,
+  getAxisTitle,
   getDisplayName,
   getLayoutContext,
   isPlainObject,
@@ -73,4 +81,5 @@ export {
   walkObject,
   supplyLayoutPlotProps,
   striptags,
+  traceTypeToAxisType,
 };
diff --git a/src/shame.js b/src/shame.js
index 1ff983358..08639656e 100644
--- a/src/shame.js
+++ b/src/shame.js
@@ -1,15 +1,9 @@
 /*
  * DELETE THIS FILE. EVERYTHING NEEDS TO FIND A HOME.
  */
-import {list, getFromId} from 'plotly.js/src/plots/cartesian/axis_ids';
+import {getFromId} from 'plotly.js/src/plots/cartesian/axis_ids';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 
-export function noShame(opts) {
-  if (opts.plotly && !opts.plotly.Axes) {
-    opts.plotly.Axes = {list};
-  }
-}
-
 // Temporary fix for:
 // https://github.com/plotly/react-plotly.js-editor/issues/103
 // We should be able to remove this once the plotly.react method has
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index fd278428b..5fe267a47 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -69,12 +69,12 @@
     }
   }
 
-  &:hover {
+  &:hover:not(.button--no-text--disabled) {
     background-color: var(--color-button-#{$variant}-hover-fill);
     border: 1px solid var(--color-button-#{$variant}-hover-border);
     color: var(--color-button-#{$variant}-hover-text);
   }
-  &:active {
+  &:active:not(.button--no-text--disabled) {
     background-color: var(--color-button-#{$variant}-active-fill);
     border: 1px solid var(--color-button-#{$variant}-active-border);
     color: var(--color-button-#{$variant}-active-text);
diff --git a/src/styles/components/widgets/_button.scss b/src/styles/components/widgets/_button.scss
index 9b50e0ad3..a7a081d51 100644
--- a/src/styles/components/widgets/_button.scss
+++ b/src/styles/components/widgets/_button.scss
@@ -59,6 +59,19 @@ button {
     margin-right: var(--spacing-half-unit);
   }
 
+  &--no-text {
+    @include button();
+    padding-right: var(--spacing-quarter-unit);
+    margin-left: 5px;
+    &--disabled {
+      @include button();
+      padding-right: var(--spacing-quarter-unit);
+      margin-left: 5px;
+      color: rgb(186, 186, 186);
+      cursor: default;
+    }
+  }
+
   &--default {
     @include button();
   }