diff --git a/dev/mocks.json b/dev/mocks.json
index c13a3f0d0..e7436f252 100644
--- a/dev/mocks.json
+++ b/dev/mocks.json
@@ -3,6 +3,8 @@
   "/percy/panelTest.json",
   "/percy/bar.json",
   "/percy/box.json",
+  "/percy/funnel.json",
+  "/percy/funnelarea.json",
   "/percy/histogram.json",
   "/percy/histogram2d.json",
   "/percy/pie.json",
diff --git a/dev/percy/funnel.json b/dev/percy/funnel.json
new file mode 100644
index 000000000..8d716a1f1
--- /dev/null
+++ b/dev/percy/funnel.json
@@ -0,0 +1,9 @@
+{
+  "data": [
+    {
+      "type": "funnel",
+      "y": ["Lead", "Pipeline", "Proposal", "Negotiation", "Closed (Won)"],
+      "x": [ 610, 432, 231, 103, 54 ]
+    }
+  ]
+}
diff --git a/dev/percy/funnelarea.json b/dev/percy/funnelarea.json
new file mode 100644
index 000000000..b5f5d23d1
--- /dev/null
+++ b/dev/percy/funnelarea.json
@@ -0,0 +1,9 @@
+{
+  "data": [
+    {
+      "type": "funnelarea",
+      "labels": ["Lead", "Pipeline", "Proposal", "Negotiation", "Closed (Won)"],
+      "values": [ 610, 432, 231, 103, 54 ]
+    }
+  ]
+}
diff --git a/dev/percy/index.js b/dev/percy/index.js
index 7598bd307..0c070d867 100644
--- a/dev/percy/index.js
+++ b/dev/percy/index.js
@@ -8,4 +8,6 @@ export {default as box} from './box.json';
 export {default as waterfall} from './waterfall.json';
 export {default as sunburst} from './sunburst.json';
 export {default as sankey} from './sankey.json';
+export {default as funnel} from './funnel.json';
+export {default as funnelarea} from './funnelarea.json';
 export {default as geoTest} from './geoTest.json';
diff --git a/src/EditorControls.js b/src/EditorControls.js
index 204ca4a9e..3b08f5078 100644
--- a/src/EditorControls.js
+++ b/src/EditorControls.js
@@ -11,6 +11,7 @@ import {
   shamefullyAdjustSplitStyleTargetContainers,
   shamefullyDeleteRelatedAnalysisTransforms,
   shamefullyAdjustSizeref,
+  shamefullyAdjustAxisDirection,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -71,7 +72,7 @@ class EditorControls extends Component {
         }
 
         shamefullyAdjustSizeref(graphDiv, payload);
-
+        shamefullyAdjustAxisDirection(graphDiv, payload);
         shamefullyClearAxisTypes(graphDiv, payload);
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);
diff --git a/src/components/containers/SubplotAccordion.js b/src/components/containers/SubplotAccordion.js
index 54b8982d8..d62772168 100644
--- a/src/components/containers/SubplotAccordion.js
+++ b/src/components/containers/SubplotAccordion.js
@@ -64,7 +64,7 @@ class SubplotAccordion extends Component {
     // of right type that have attr 'subplot': 'ternary' in their data.
 
     /**
-    Example: 
+    Example:
     {
       "data": [
         {
@@ -126,7 +126,9 @@ class SubplotAccordion extends Component {
     data.forEach((d, i) => {
       if (
         (d.type === 'pie' && d.values) ||
-        ['pie', 'table', 'sunburst', 'sankey', 'parcoords', 'parcats'].includes(d.type)
+        ['pie', 'table', 'sunburst', 'sankey', 'parcoords', 'parcats', 'funnelarea'].includes(
+          d.type
+        )
       ) {
         counter[d.type]++;
         const currentCount = counter[d.type];
diff --git a/src/components/containers/TraceMarkerSection.js b/src/components/containers/TraceMarkerSection.js
index 149f57557..a798255b0 100644
--- a/src/components/containers/TraceMarkerSection.js
+++ b/src/components/containers/TraceMarkerSection.js
@@ -15,12 +15,10 @@ class TraceMarkerSection extends Component {
   setLocals(context) {
     const _ = this.context.localize;
     const traceType = context.fullContainer.type;
-    if (['bar', 'histogram'].includes(traceType)) {
+    if (['bar', 'histogram', 'funnel', 'waterfall'].includes(traceType)) {
       this.name = _('Bars');
-    } else if (traceType === 'pie') {
-      this.name = _('Pie Segments');
-    } else if (traceType === 'sunburst') {
-      this.name = _('Sunburst Segments');
+    } else if (['funnelarea', 'pie', 'sunburst'].includes(traceType)) {
+      this.name = _('Segments');
     } else {
       this.name = _('Points');
     }
diff --git a/src/components/fields/DataSelector.js b/src/components/fields/DataSelector.js
index 5cdefe92b..59a676d5a 100644
--- a/src/components/fields/DataSelector.js
+++ b/src/components/fields/DataSelector.js
@@ -40,6 +40,7 @@ export class UnconnectedDataSelector extends Component {
             'scatter',
             'scattergl',
             'bar',
+            'funnel',
             'heatmap',
             'heatmapgl',
             'violin',
diff --git a/src/components/fields/TextPosition.js b/src/components/fields/TextPosition.js
index 0542c7888..d0a12efa4 100644
--- a/src/components/fields/TextPosition.js
+++ b/src/components/fields/TextPosition.js
@@ -91,7 +91,7 @@ export default connectToContainer(UnconnectedTextPosition, {
       {label: _('Bottom Center'), value: 'bottom center'},
       {label: _('Bottom Right'), value: 'bottom right'},
     ];
-    if (['pie', 'bar', 'waterfall'].includes(context.container.type)) {
+    if (['pie', 'bar', 'funnel', 'waterfall'].includes(context.container.type)) {
       options = [
         {label: _('Inside'), value: 'inside'},
         {label: _('Outside'), value: 'outside'},
@@ -99,6 +99,9 @@ export default connectToContainer(UnconnectedTextPosition, {
         {label: _('None'), value: 'none'},
       ];
     }
+    if (['funnelarea'].includes(context.container.type)) {
+      options = [{label: _('Inside'), value: 'inside'}, {label: _('None'), value: 'none'}];
+    }
     plotProps.options = options;
     plotProps.clearable = false;
   },
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 2b03f664f..569eda5fc 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -500,12 +500,23 @@ function computeAxesRefOptions(axes, propsAttr) {
 export const TextInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;
-    const options = [
+
+    let options = [
       {label: _('Label'), value: 'label'},
       {label: _('Value'), value: 'value'},
       {label: _('%'), value: 'percent'},
     ];
 
+    if (container.type === 'funnel') {
+      options = [
+        {label: _('Label'), value: 'label'},
+        {label: _('Value'), value: 'value'},
+        {label: _('% initial'), value: 'percent initial'},
+        {label: _('% previous'), value: 'percent previous'},
+        {label: _('% total'), value: 'percent total'},
+      ];
+    }
+
     if (container.text) {
       options.push({label: _('Text'), value: 'text'});
     }
@@ -591,11 +602,11 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       options = [];
     }
 
-    if (container.labels && ['pie', 'sunburst'].includes(container.type)) {
+    if (container.labels && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Label'), value: 'label'});
     }
 
-    if (container.values && ['pie', 'sunburst'].includes(container.type)) {
+    if (container.values && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Value'), value: 'value'});
     }
 
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index e78cb8db8..756265d9d 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -91,18 +91,11 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Numeric label={_('Max Tube segments')} attr="maxdisplayed" />
     </PlotlySection>
     <MultiColorPicker label={_('Color')} attr="color" />
-    <TraceTypeSection name={_('Waterfall')} traceTypes={['waterfall']} mode="trace">
-      <LayoutSection attr="name">
-        <Radio
-          label={_('Mode')}
-          attr="waterfallmode"
-          options={[{label: _('Group'), value: 'group'}, {label: _('Overlay'), value: 'overlay'}]}
-        />
-        <NumericFraction label={_('Gap')} attr="waterfallgap" />
-        <NumericFraction label={_('Group gap')} attr="waterfallgroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Pie Colors')} traceTypes={['pie']} mode="trace">
+    <TraceTypeSection
+      name={_('Segment Colors')}
+      traceTypes={['pie', 'sunburst', 'funnelarea']}
+      mode="trace"
+    >
       <LayoutSection attr="name">
         <ColorwayPicker label={_('Colors')} attr="piecolorway" />
         <Radio
@@ -110,19 +103,32 @@ const StyleTracesPanel = (props, {localize: _}) => (
           attr="extendpiecolors"
           options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
         />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Sunburst Colors')} traceTypes={['sunburst']} mode="trace">
-      <LayoutSection attr="name">
         <ColorwayPicker label={_('Colors')} attr="sunburstcolorway" />
         <Radio
           label={_('Extended Colors')}
           attr="extendsunburstcolors"
           options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
         />
+        <ColorwayPicker label={_('Colors')} attr="funnelareacolorway" />
+        <Radio
+          label={_('Extended Colors')}
+          attr="extendfunnelareacolors"
+          options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+        />
       </LayoutSection>
     </TraceTypeSection>
-    <PlotlySection name={_('Pie Title')} attr="title.text">
+    <PlotlySection name={_('Funnel Dimensions')} traceTypes={['funnelarea']} attr="aspectratio">
+      <Numeric
+        label={_('Aspect Ratio')}
+        attr="aspectratio"
+        step={0.01}
+        min={0}
+        max={2}
+        showSlider
+      />
+      <NumericFraction label={_('Base Ratio')} attr="baseratio" />
+    </PlotlySection>
+    <PlotlySection name={_('Subplot Title')} attr="title.text">
       <TextEditor label={_('Name')} attr="title.text" />
       <Dropdown
         label={'Title Position'}
@@ -231,7 +237,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     </PlotlySection>
     <TraceTypeSection
       name={_('Bar Grouping, Sizing and Spacing')}
-      traceTypes={['bar', 'histogram']}
+      traceTypes={['bar', 'histogram', 'funnel', 'waterfall']}
       mode="trace"
     >
       <LayoutSection attr="name">
@@ -258,6 +264,32 @@ const StyleTracesPanel = (props, {localize: _}) => (
         />
         <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
         <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
+
+        <Dropdown
+          label={_('Bar Mode')}
+          attr="funnelmode"
+          options={[
+            {label: _('Grouped'), value: 'group'},
+            {label: _('Stacked'), value: 'stack'},
+            {label: _('Overlaid'), value: 'overlay'},
+          ]}
+          clearable={false}
+        />
+        <NumericFractionInverse label={_('Bar Width')} attr="funnelgap" />
+        <NumericFraction label={_('Bar Padding')} attr="funnelgroupgap" />
+
+        <Dropdown
+          label={_('Bar Mode')}
+          attr="waterfallmode"
+          options={[
+            {label: _('Grouped'), value: 'group'},
+            {label: _('Stacked'), value: 'stack'},
+            {label: _('Overlaid'), value: 'overlay'},
+          ]}
+          clearable={false}
+        />
+        <NumericFractionInverse label={_('Bar Width')} attr="waterfallgap" />
+        <NumericFraction label={_('Bar Padding')} attr="waterfallgroupgap" />
       </LayoutSection>
     </TraceTypeSection>
     <PlotlySection name={_('Binning')}>
@@ -363,6 +395,60 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
       <Numeric label={_('Max Number of Points')} attr="marker.maxdisplayed" />
     </TraceMarkerSection>
+    <PlotlySection name={_('Connector Styles')}>
+      <Radio
+        attr="connector.visible"
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+      />
+      <MultiColorPicker label={_('Fill Color')} attr="connector.fillcolor" />
+      <Numeric label={_('Line Width')} attr="connector.line.width" />
+      <MultiColorPicker label={_('Line Color')} attr="connector.line.color" />
+      <LineDashSelector label={_('Line Type')} attr="connector.line.dash" />
+      <Dropdown
+        label={_('Line Shape')}
+        options={[
+          {label: _('Spanning'), value: 'spanning'},
+          {label: _('Between'), value: 'between'},
+        ]}
+        attr="connector.mode"
+        clearable={false}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Increasing Marker Styles')}>
+      <TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
+      <Numeric label={_('Width')} attr="increasing.line.width" />
+      <MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
+      <MultiColorPicker label={_('Marker Color')} attr="increasing.marker.color" />
+      <MultiColorPicker label={_('Line Color')} attr="increasing.marker.line.color" />
+      <Numeric label={_('Line Width')} attr="increasing.marker.line.width" />
+      <MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
+      <LineDashSelector label={_('Type')} attr="increasing.line.dash" />
+      <Radio
+        label={_('Show in Legend')}
+        attr="increasing.showlegend"
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Decreasing Marker Styles')}>
+      <TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
+      <Numeric label={_('Width')} attr="decreasing.line.width" />
+      <MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
+      <MultiColorPicker label={_('Marker Color')} attr="decreasing.marker.color" />
+      <MultiColorPicker label={_('Line Color')} attr="decreasing.marker.line.color" />
+      <Numeric label={_('Line Width')} attr="decreasing.marker.line.width" />
+      <MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
+      <LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
+      <Radio
+        label={_('Show in Legend')}
+        attr="decreasing.showlegend"
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Total Marker Styles')}>
+      <MultiColorPicker label={_('Marker Color')} attr="totals.marker.color" />
+      <MultiColorPicker label={_('Line Color')} attr="totals.marker.line.color" />
+      <Numeric label={_('Line Width')} attr="totals.marker.line.width" />
+    </PlotlySection>
     <PlotlySection name={_('Ticks')}>
       <Numeric label={_('Width')} attr="tickwidth" />
     </PlotlySection>
@@ -597,59 +683,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <NumericFraction label={_('Y')} attr="lightposition.y" />
       <NumericFraction label={_('Z')} attr="lightposition.z" />
     </PlotlySection>
-    <PlotlySection name={_('Increasing Marker Styles')}>
-      <TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
-      <Numeric label={_('Width')} attr="increasing.line.width" />
-      <MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
-      <MultiColorPicker label={_('Marker Color')} attr="increasing.marker.color" />
-      <MultiColorPicker label={_('Line Color')} attr="increasing.marker.line.color" />
-      <Numeric label={_('Line Width')} attr="increasing.marker.line.width" />
-      <MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
-      <LineDashSelector label={_('Type')} attr="increasing.line.dash" />
-      <Radio
-        label={_('Show in Legend')}
-        attr="increasing.showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Decreasing Marker Styles')}>
-      <TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
-      <Numeric label={_('Width')} attr="decreasing.line.width" />
-      <MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
-      <MultiColorPicker label={_('Marker Color')} attr="decreasing.marker.color" />
-      <MultiColorPicker label={_('Line Color')} attr="decreasing.marker.line.color" />
-      <Numeric label={_('Line Width')} attr="decreasing.marker.line.width" />
-      <MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
-      <LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
-      <Radio
-        label={_('Show in Legend')}
-        attr="decreasing.showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Total Marker Styles')}>
-      <MultiColorPicker label={_('Marker Color')} attr="totals.marker.color" />
-      <MultiColorPicker label={_('Line Color')} attr="totals.marker.line.color" />
-      <Numeric label={_('Line Width')} attr="totals.marker.line.width" />
-    </PlotlySection>
-    <PlotlySection name={_('Connector Styles')}>
-      <Radio
-        attr="connector.visible"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Line Width')} attr="connector.line.width" />
-      <MultiColorPicker label={_('Line Color')} attr="connector.line.color" />
-      <LineDashSelector label={_('Line Type')} attr="connector.line.dash" />
-      <Dropdown
-        label={_('Line Shape')}
-        options={[
-          {label: _('Spanning'), value: 'spanning'},
-          {label: _('Between'), value: 'between'},
-        ]}
-        attr="connector.mode"
-        clearable={false}
-      />
-    </PlotlySection>
     <PlotlySection name={_('Scaling')}>
       <GroupCreator label={_('Scale Group')} prefix={_('Group')} attr="scalegroup" />
       <Radio
@@ -729,7 +762,8 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Line Color')} attr="link.line.color" />
       <Numeric label={_('Line Width')} attr="link.line.width" min={0} />
     </PlotlySection>
-    <PlotlySection name={_('Hover/Tooltip Text')}>
+    <PlotlySection name={_('Hover/Tooltip')}>
+      <HoveronDropdown attr="hoveron" label={_('Hover on')} />
       <HoverTemplateSwitch attr="hovertemplate" label={_('Mode')} />
       <HoverInfo attr="hoverinfo" label={_('Show')} />
       <HoverTemplateText attr="hovertemplate" label={_('Template')} />
@@ -762,9 +796,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Text label={_('Value Format')} attr="valueformat" />
       <Text label={_('Value Suffix')} attr="valuesuffix" />
     </PlotlySection>
-    <PlotlySection name={_('Hover Action')}>
-      <HoveronDropdown attr="hoveron" label={_('Hover on')} />
-    </PlotlySection>
     <TraceTypeSection
       name={_('Error Bars X')}
       traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 98d0e2805..a0f4dcf74 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -73,6 +73,7 @@ export const TRACE_TO_AXIS = {
     'scattercarpet',
     'contourcarpet',
     'waterfall',
+    'funnel',
   ],
   ternary: ['scatterternary'],
   gl3d: ['scatter3d', 'surface', 'mesh3d', 'cone', 'streamtube'],
diff --git a/src/lib/customTraceType.js b/src/lib/customTraceType.js
index 9bd749d9b..251eb4720 100644
--- a/src/lib/customTraceType.js
+++ b/src/lib/customTraceType.js
@@ -1,5 +1,3 @@
-import {COLORS} from 'lib/constants';
-
 export function plotlyTraceToCustomTrace(trace) {
   if (typeof trace !== 'object') {
     throw new Error(
@@ -45,29 +43,10 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
       return {type: 'scatter' + gl, mode: 'lines', stackgroup: 1};
     case 'scatterpolar':
       return {type: 'scatterpolar' + gl};
-    case 'ohlc':
-      return {
-        type: 'ohlc',
-        decreasing: {line: {color: COLORS.middleGray}},
-        increasing: {line: {color: COLORS.blueTeal}},
-      };
     case 'waterfall':
       return {
         type: 'waterfall',
-        decreasing: {line: {color: COLORS.middleGray}},
-        increasing: {line: {color: COLORS.blueTeal}},
-      };
-    case 'candlestick':
-      return {
-        type: 'candlestick',
-        decreasing: {
-          line: {color: COLORS.middleGray},
-          fillcolor: 'rgba(127, 127, 127, 0.5)',
-        },
-        increasing: {
-          line: {color: COLORS.blueTeal},
-          fillcolor: 'rgba(23, 190, 207, 0.5)',
-        },
+        orientation: 'v',
       };
     case 'box':
       return {
diff --git a/src/lib/traceTypes.js b/src/lib/traceTypes.js
index 54ad1695a..ed41f57bc 100644
--- a/src/lib/traceTypes.js
+++ b/src/lib/traceTypes.js
@@ -200,6 +200,16 @@ export const traceTypes = _ => [
     label: _('Waterfall'),
     category: chartCategory(_).FINANCIAL,
   },
+  {
+    value: 'funnel',
+    label: _('Funnel'),
+    category: chartCategory(_).FINANCIAL,
+  },
+  {
+    value: 'funnelarea',
+    label: _('Funnel Area'),
+    category: chartCategory(_).FINANCIAL,
+  },
   {
     value: 'scattergl',
     icon: 'scatter',
diff --git a/src/shame.js b/src/shame.js
index 14b6fcecd..e20f1da6d 100644
--- a/src/shame.js
+++ b/src/shame.js
@@ -212,3 +212,9 @@ export const shamefullyAdjustSizeref = (gd, {update}) => {
     update['marker.sizemode'] = 'area';
   }
 };
+
+export const shamefullyAdjustAxisDirection = (gd, {update}) => {
+  if (update.type === 'funnel' && gd.data.length === 1) {
+    gd.layout.yaxis.autorange = 'reversed';
+  }
+};