diff --git a/dev/mocks.json b/dev/mocks.json
index 372cbc945..9fb9cf892 100644
--- a/dev/mocks.json
+++ b/dev/mocks.json
@@ -1,8 +1,11 @@
 [
   "/mocks/aggregate.json",
   "/percy/panelTest.json",
+  "/percy/bar.json",
+  "/percy/box.json",
   "/percy/histogram.json",
   "/percy/histogram2d.json",
+  "/percy/violin.json",
   "0.json",
   "1.json",
   "10.json",
diff --git a/dev/percy/bar.json b/dev/percy/bar.json
new file mode 100644
index 000000000..e0fc4d8f0
--- /dev/null
+++ b/dev/percy/bar.json
@@ -0,0 +1,45 @@
+{
+  "data": [
+    {
+      "type": "bar",
+      "mode": "markers",
+      "uid": "040729",
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1",
+      "error_x": {
+        "visible": true,
+        "symmetric": true
+      },
+      "error_y": {
+        "visible": true,
+        "symmetric": false
+      }
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "type": "linear",
+      "range": [
+        0,
+        115.78947368421052
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "range": [
+        -0.5,
+        5.815789473684211
+      ],
+      "autorange": true
+    },
+    "autosize": true,
+    "barmode": "group",
+    "barnorm": "percent",
+    "bargroupgap": 0.28
+  },
+  "frames": []
+}
diff --git a/dev/percy/box.json b/dev/percy/box.json
new file mode 100644
index 000000000..4f1e8cdb6
--- /dev/null
+++ b/dev/percy/box.json
@@ -0,0 +1,38 @@
+{
+  "data": [
+    {
+      "type": "box",
+      "mode": "markers",
+      "uid": "43d2ef",
+      "boxpoints": "all",
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1",
+      "boxmean": true
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "type": "linear",
+      "range": [
+        0.7222222222222222,
+        6.277777777777778
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "type": "category",
+      "range": [
+        -0.696,
+        0.5
+      ],
+      "autorange": true
+    },
+    "autosize": true,
+    "boxmode": "overlay"
+  },
+  "frames": []
+}
diff --git a/dev/percy/index.js b/dev/percy/index.js
index 32a680630..19f80bbfc 100644
--- a/dev/percy/index.js
+++ b/dev/percy/index.js
@@ -1,5 +1,8 @@
 import panelTest from './panelTest.json';
 import histogram from './histogram.json';
 import histogram2d from './histogram2d.json';
+import violin from './violin.json';
+import bar from './bar.json';
+import box from './box.json';
 
-export {panelTest, histogram, histogram2d};
+export {panelTest, histogram, histogram2d, violin, bar, box};
diff --git a/dev/percy/violin.json b/dev/percy/violin.json
new file mode 100644
index 000000000..a33e89108
--- /dev/null
+++ b/dev/percy/violin.json
@@ -0,0 +1,28 @@
+{
+  "data": [
+    {
+      "type": "violin",
+      "mode": "markers",
+      "uid": "91db56",
+      "box": {
+        "visible": true
+      },
+      "meanline": {
+        "visible": true
+      },
+      "bandwidth": 0,
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1"
+    }
+  ],
+  "layout": {
+    "xaxis": {},
+    "yaxis": {},
+    "autosize": true
+  },
+  "frames": []
+}
diff --git a/src/__percy__/panels.percy.js b/src/__percy__/panels.percy.js
index 9bd071ff6..3c8c5bf36 100644
--- a/src/__percy__/panels.percy.js
+++ b/src/__percy__/panels.percy.js
@@ -14,8 +14,11 @@ import './percy.css';
  * To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested
  */
 const panelsToTest = {
-  histogram: ['GraphCreatePanel'],
+  bar: ['GraphCreatePanel', 'StyleTracesPanel'],
+  box: ['GraphCreatePanel', 'StyleTracesPanel'],
+  histogram: ['GraphCreatePanel', 'StyleTracesPanel'],
   histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
+  violin: ['GraphCreatePanel', 'StyleTracesPanel'],
 };
 
 window.URL.createObjectURL = function() {
diff --git a/src/components/fields/FilterOperation.js b/src/components/fields/FilterOperation.js
index c6a304230..3f6843329 100644
--- a/src/components/fields/FilterOperation.js
+++ b/src/components/fields/FilterOperation.js
@@ -168,7 +168,7 @@ class UnconnectedFilterValue extends Component {
     const {fullValue, attr, defaultValue} = this.props;
     const op = findOperation(operation);
 
-    let label1 = _('Target');
+    let label1 = _('Reference');
     if (op === 'inrange' || op === 'exrange') {
       label1 = _('Lower Bound');
     } else if (op === 'inset' || op === 'exset') {
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index a306eb9a7..131fa4e94 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -189,12 +189,25 @@ const StyleTracesPanel = (props, {localize: _}) => (
           {label: _('Unsorted'), value: false},
         ]}
       />
-      <Radio
+      <Dropdown
+        options={[
+          {label: _('Show All'), value: 'all'},
+          {label: _('Outliers'), value: 'outliers'},
+          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
+          {label: _('Hide'), value: false},
+        ]}
         attr="boxpoints"
+        clearable={false}
+      />
+      <Dropdown
         options={[
-          {label: _('Show'), value: 'all'},
+          {label: _('Show All'), value: 'all'},
+          {label: _('Outliers'), value: 'outliers'},
+          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
           {label: _('Hide'), value: false},
         ]}
+        attr="points"
+        clearable={false}
       />
       <NumericFraction label={_('Jitter')} attr="jitter" />
       <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
@@ -207,17 +220,54 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Border Color')} attr="marker.line.color" />
     </TraceMarkerSection>
     <LayoutSection name={_('Size and Spacing')}>
-      <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+      <Radio
+        label={_('Box Mode')}
+        attr="boxmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+        ]}
+      />
       <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
-      <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
       <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
+      <Dropdown
+        label={_('Bar Mode')}
+        attr="barmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+          {label: _('Stack'), value: 'stack'},
+          {label: _('Relative'), value: 'relative'},
+        ]}
+        clearable={false}
+      />
+      <Dropdown
+        label={_('Normalization')}
+        attr="barnorm"
+        options={[
+          {label: _('None'), value: ''},
+          {label: _('Fraction'), value: 'fraction'},
+          {label: _('Percent'), value: 'percent'},
+        ]}
+        clearable={false}
+      />
+      <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+      <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
+      <Radio
+        label={_('Violin Mode')}
+        attr="violinmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+        ]}
+      />
+      <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
+      <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
     </LayoutSection>
+    <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
     <PlotlySection name={_('Ticks')}>
       <Numeric label={_('Width')} attr="tickwidth" />
     </PlotlySection>
-    <PlotlySection name={_('Whiskers')}>
-      <Numeric label={_('Width')} attr="whiskerwidth" />
-    </PlotlySection>
     <TraceTypeSection
       name={_('Lines')}
       traceTypes={[
@@ -395,23 +445,69 @@ const StyleTracesPanel = (props, {localize: _}) => (
         ]}
       />
     </PlotlySection>
-    <PlotlySection name={_('Highlight')}>
+    <PlotlySection name={_('Scaling')}>
+      <Numeric label={_('Bandwidth')} attr="bandwidth" />
+      <Radio
+        label="Scale Mode"
+        attr="scalemode"
+        options={[
+          {label: _('Width'), value: 'width'},
+          {label: _('Count'), value: 'count'},
+        ]}
+      />
+      <Radio
+        label="Span Mode"
+        attr="spanmode"
+        options={[
+          {label: _('Soft'), value: 'soft'},
+          {label: _('Hard'), value: 'hard'},
+          {label: _('Manual'), value: 'manual'},
+        ]}
+      />
+      <Numeric label={_('Span')} attr="span" />
+      <Radio
+        attr="side"
+        label={_('Visible Sides')}
+        options={[
+          {label: _('Both'), value: 'both'},
+          {label: _('Positive'), value: 'positive'},
+          {label: _('Negative'), value: 'negative'},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Box Mean')}>
       <Radio
         attr="boxmean"
-        label={_('Mean')}
+        options={[
+          {label: _('Mean'), value: true},
+          {label: _('Mean & SD'), value: 'sd'},
+          {label: _('None'), value: false},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Box')}>
+      <Radio
+        attr="box.visible"
         options={[
           {label: _('Show'), value: true},
           {label: _('Hide'), value: false},
         ]}
       />
+      <NumericFraction label={_('Box Width')} attr="box.width" />
+      <ColorPicker label={_('Box Fill Color')} attr="box.color" />
+      <NumericFraction label={_('Box Line Width')} attr="box.line.width" />
+      <ColorPicker label={_('Box Line Color')} attr="box.line.color" />
+    </PlotlySection>
+    <PlotlySection name={_('Meanline')}>
       <Radio
-        attr="boxmean"
-        label={_('Standard Deviation')}
+        attr="meanline.visible"
         options={[
-          {label: _('Show'), value: 'sd'},
+          {label: _('Show'), value: true},
           {label: _('Hide'), value: false},
         ]}
       />
+      <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
+      <ColorPicker label={_('Meanline Color')} attr="meanline.color" />
     </PlotlySection>
     <PlotlySection name={_('On Hover')}>
       <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 008e49e03..58e64145f 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -58,6 +58,7 @@ export const TRACE_TO_AXIS = {
     'scatter',
     'scattergl',
     'box',
+    'violin',
     'bar',
     'heatmap',
     'heatmapgl',
diff --git a/src/lib/customTraceType.js b/src/lib/customTraceType.js
index 38b1be67c..d78efe9dc 100644
--- a/src/lib/customTraceType.js
+++ b/src/lib/customTraceType.js
@@ -49,6 +49,13 @@ export function traceTypeToPlotlyInitFigure(traceType) {
         type: 'box',
         boxpoints: false,
       };
+    case 'violin':
+      return {
+        type: 'violin',
+        box: {visible: false},
+        meanline: {visible: false},
+        bandwidth: 0,
+      };
     case 'line3d':
       return {
         type: 'scatter3d',
diff --git a/src/lib/traceTypes.js b/src/lib/traceTypes.js
index 95d748990..4fb542e5c 100644
--- a/src/lib/traceTypes.js
+++ b/src/lib/traceTypes.js
@@ -12,10 +12,10 @@ export const chartCategory = _ => {
       value: 'CHARTS_3D',
       label: _('3D charts'),
     },
-    FINANCIAL: {
-      value: 'FINANCIAL',
-      label: _('Finance'),
-    },
+    // FINANCIAL: {
+    //   value: 'FINANCIAL',
+    //   label: _('Finance'),
+    // },
     DISTRIBUTIONS: {
       value: 'DISTRIBUTIONS',
       label: _('Distributions'),
@@ -42,7 +42,7 @@ export const categoryLayout = _ => [
   chartCategory(_).DISTRIBUTIONS,
   chartCategory(_).SPECIALIZED,
   chartCategory(_).MAPS,
-  chartCategory(_).FINANCIAL,
+  // chartCategory(_).FINANCIAL,
 ];
 
 export const traceTypes = _ => [
@@ -126,11 +126,11 @@ export const traceTypes = _ => [
     label: _('2D Contour Histogram'),
     category: chartCategory(_).DISTRIBUTIONS,
   },
-  // {
-  //   value: 'violin',
-  //   label: _('Violin'),
-  //   category: chartCategory(_).DISTRIBUTIONS,
-  // },
+  {
+    value: 'violin',
+    label: _('Violin'),
+    category: chartCategory(_).DISTRIBUTIONS,
+  },
   {
     value: 'choropleth',
     label: _('Choropleth'),
@@ -146,16 +146,6 @@ export const traceTypes = _ => [
     label: _('Atlas Map'),
     category: chartCategory(_).MAPS,
   },
-  {
-    value: 'candlestick',
-    label: _('Candlestick'),
-    category: chartCategory(_).FINANCIAL,
-  },
-  {
-    value: 'ohlc',
-    label: _('OHLC'),
-    category: chartCategory(_).FINANCIAL,
-  },
   // {
   //   value: 'parcoords',
   //   label: _('Parallel Coordinates'),
@@ -181,6 +171,16 @@ export const traceTypes = _ => [
     label: _('Ternary Scatter'),
     category: chartCategory(_).SPECIALIZED,
   },
+  {
+    value: 'candlestick',
+    label: _('Candlestick'),
+    category: chartCategory(_).SPECIALIZED,
+  },
+  {
+    value: 'ohlc',
+    label: _('OHLC'),
+    category: chartCategory(_).SPECIALIZED,
+  },
   // {
   //   value: 'pointcloud',
   //   label: _('Point Cloud'),