diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index febe736d1..13e19d816 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -99,7 +99,6 @@ UnconnectedAxisCreator.propTypes = {
   attr: PropTypes.string,
   label: PropTypes.string,
   options: PropTypes.array,
-  canAddAxis: PropTypes.bool,
   container: PropTypes.object,
   fullContainer: PropTypes.object,
   updateContainer: PropTypes.func,
diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js
index a91bec8bb..399d4c6ff 100644
--- a/src/components/fields/Field.js
+++ b/src/components/fields/Field.js
@@ -73,6 +73,7 @@ class Field extends Component {
         ) : null}
         <div className={fieldClass}>
           {children}
+          {extraComponent ? extraComponent : null}
           {multiValued && !suppressMultiValuedMessage ? (
             <MenuPanel label={getMultiValueText('title', _)} ownline question>
               <div className="info__title">{getMultiValueText('title', _)}</div>
@@ -80,7 +81,6 @@ class Field extends Component {
               <div className="info__sub-text">{getMultiValueText('subText', _)}</div>
             </MenuPanel>
           ) : null}
-          {extraComponent ? extraComponent : null}
         </div>
         {units ? (
           <div className={bem('field', 'units')}>
diff --git a/src/components/fields/GroupCreator.js b/src/components/fields/GroupCreator.js
new file mode 100644
index 000000000..e7fb7ff25
--- /dev/null
+++ b/src/components/fields/GroupCreator.js
@@ -0,0 +1,84 @@
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+import Field from './Field';
+import Dropdown from './Dropdown';
+import PropTypes from 'prop-types';
+import Button from '../widgets/Button';
+import {PlusIcon} from 'plotly-icons';
+import {MULTI_VALUED} from 'lib/constants';
+
+class UnconnectedGroupCreator extends Component {
+  getAllGroups() {
+    return [...new Set(this.context.data.map(t => t[this.props.attr]))].filter(g => Boolean(g));
+  }
+
+  canAddGroup() {
+    const {fullContainer, attr} = this.props;
+    const currentGroup = fullContainer[attr];
+    const currentTraceIndex = fullContainer.index;
+
+    if (fullContainer.index === MULTI_VALUED) {
+      return this.getAllGroups().length === 0;
+    }
+
+    return (
+      !currentGroup ||
+      this.context.fullData.some(d => d.index !== currentTraceIndex && d[attr] === currentGroup)
+    );
+  }
+
+  addAndUpdateGroup() {
+    const allGroups = this.context.fullData
+      .map(t => parseInt(t[this.props.attr], 10))
+      .filter(n => Number.isInteger(n));
+    // don't want to pass empty array to max
+    allGroups.push(0);
+
+    const lastGroupNumber = Math.max.apply(Math, allGroups);
+
+    this.props.updatePlot(lastGroupNumber + 1);
+  }
+
+  render() {
+    const {localize: _} = this.context;
+    const {attr, label, prefix, updatePlot} = this.props;
+
+    const options = [{label: _('None'), value: ''}];
+    const allGroups = this.getAllGroups();
+    allGroups.forEach(g => options.push({label: `${prefix} ${g}`, value: g}));
+    options.sort((a, b) => a.value - b.value);
+
+    const icon = <PlusIcon />;
+    const addButton = this.canAddGroup() ? (
+      <Button variant="no-text" icon={icon} onClick={() => this.addAndUpdateGroup()} />
+    ) : (
+      <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
+    );
+
+    return (
+      <Dropdown
+        label={label}
+        attr={attr}
+        clearable={false}
+        options={options}
+        updatePlot={updatePlot}
+        extraComponent={addButton}
+      />
+    );
+  }
+}
+
+UnconnectedGroupCreator.propTypes = {
+  attr: PropTypes.string,
+  fullContainer: PropTypes.object,
+  prefix: PropTypes.string,
+  ...Field.propTypes,
+};
+
+UnconnectedGroupCreator.contextTypes = {
+  localize: PropTypes.func,
+  data: PropTypes.array,
+  fullData: PropTypes.array,
+};
+
+export default connectToContainer(UnconnectedGroupCreator);
diff --git a/src/components/fields/SubplotCreator.js b/src/components/fields/SubplotCreator.js
index e2c823bc5..45e4bd186 100644
--- a/src/components/fields/SubplotCreator.js
+++ b/src/components/fields/SubplotCreator.js
@@ -1,7 +1,7 @@
+import React, {Component} from 'react';
 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';
@@ -9,7 +9,7 @@ import {connectToContainer, traceTypeToAxisType, getSubplotTitle} from 'lib';
 import {PlotlySection} from 'components';
 
 class UnconnectedSingleSubplotCreator extends Component {
-  canAddAxis() {
+  canAddSubplot() {
     const currentAxisId = this.props.fullContainer[this.props.attr];
     const currentTraceIndex = this.props.fullContainer.index;
     return this.context.fullData.some(
@@ -62,7 +62,7 @@ class UnconnectedSingleSubplotCreator extends Component {
 
   render() {
     const icon = <PlusIcon />;
-    const extraComponent = this.canAddAxis() ? (
+    const extraComponent = this.canAddSubplot() ? (
       <Button variant="no-text" icon={icon} onClick={() => this.addAndUpdateSubplot()} />
     ) : (
       <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
@@ -86,7 +86,6 @@ UnconnectedSingleSubplotCreator.propTypes = {
   layoutAttr: PropTypes.string,
   label: PropTypes.string,
   options: PropTypes.array,
-  canAddAxis: PropTypes.bool,
   container: PropTypes.object,
   fullContainer: PropTypes.object,
   updateContainer: PropTypes.func,
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index d331c4bef..07f3d24b6 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -145,7 +145,7 @@ export const BinningDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
-export const ShowInLegend = connectToContainer(UnconnectedRadio, {
+export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
   modifyPlotProps: (props, context, plotProps) => {
     plotProps.isVisible = context.fullLayout.showlegend;
     return plotProps;
diff --git a/src/components/fields/index.js b/src/components/fields/index.js
index 5744ea77b..6682f016a 100644
--- a/src/components/fields/index.js
+++ b/src/components/fields/index.js
@@ -21,6 +21,7 @@ import TraceSelector from './TraceSelector';
 import ErrorBars from './ErrorBars';
 import AxesCreator from './AxesCreator';
 import SubplotCreator from './SubplotCreator';
+import GroupCreator from './GroupCreator';
 import UpdateMenuButtons from './UpdateMenuButtons';
 import {FilterOperation, FilterValue} from './FilterOperation';
 import MarkerSize from './MarkerSize';
@@ -100,6 +101,7 @@ export {
   TraceSelector,
   AxesCreator,
   SubplotCreator,
+  GroupCreator,
   AxisOverlayDropdown,
   AxisSide,
   UpdateMenuButtons,
diff --git a/src/components/index.js b/src/components/index.js
index 0099087ed..3e58fd79d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -39,6 +39,7 @@ import {
   RangesliderVisible,
   AxesCreator,
   SubplotCreator,
+  GroupCreator,
   SymbolSelector,
   TextEditor,
   TraceOrientation,
@@ -146,6 +147,7 @@ export {
   SingleSidebarItem,
   AxesCreator,
   SubplotCreator,
+  GroupCreator,
   SymbolSelector,
   TextEditor,
   SubplotAccordion,
diff --git a/src/default_panels/StyleLegendPanel.js b/src/default_panels/StyleLegendPanel.js
index 2952a3f46..b650789f0 100644
--- a/src/default_panels/StyleLegendPanel.js
+++ b/src/default_panels/StyleLegendPanel.js
@@ -63,13 +63,16 @@ const StyleLegendPanel = (props, {localize: _}) => (
         />
       </PlotlySection>
       <PlotlySection name={_('Trace Order')}>
-        <Radio
+        <Dropdown
           attr="legend.traceorder"
           options={[
             {label: _('Normal'), value: 'normal'},
             {label: _('Reversed'), value: 'reversed'},
+            {label: _('Grouped'), value: 'grouped'},
+            {label: _('Reversed and Grouped'), value: 'reversed+grouped'},
           ]}
         />
+        <Numeric label={_('Gap Between Groups')} attr="legend.tracegroupgap" units="px" />
       </PlotlySection>
     </PlotlyFold>
   </TraceRequiredPanel>
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 4576c38f4..06ede4bb8 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -30,6 +30,7 @@ import {
   ErrorBars,
   DataSelector,
   VisibilitySelect,
+  GroupCreator,
 } from '../components';
 import {
   BinningNumeric,
@@ -43,12 +44,17 @@ import {
 const StyleTracesPanel = (props, {localize: _}) => (
   <TraceAccordion canGroup>
     <TextEditor label={_('Name')} attr="name" richTextOnly />
-    <ShowInLegend
-      label={_('Show in Legend')}
-      attr="showlegend"
-      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-    />
     <NumericFraction label={_('Trace Opacity')} attr="opacity" />
+    <PlotlySection name={_('Legend')}>
+      <ShowInLegend
+        label={_('Show in Legend')}
+        attr="showlegend"
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+        showOn={true}
+      >
+        <GroupCreator label={_('Legend Group')} prefix={_('Group')} attr="legendgroup" />
+      </ShowInLegend>
+    </PlotlySection>
     <PlotlySection name={_('Cones & Streamtubes')}>
       <Numeric label={_('Size')} attr="sizeref" />
       <Dropdown