Add option for rounded corners on bar charts

src/traces/bar/attributes.js

@@ -42,7 +42,16 @@ var marker = extendFlat({
         editType: 'style',
         description: 'Sets the opacity of the bars.'
     },
-    pattern: pattern
+    pattern: pattern,
+    cornerradius: {
+        valType: 'any',
+        dflt: 0,
+        editType: 'plot',
+        description: [
+            'Sets the rounding of corners. May be an integer number of pixels,',
+            'or a percentage of bar width(as a string).'
+        ].join(' ')
+    },
 });
 
 module.exports = {

src/traces/bar/layout_attributes.js

@@ -51,5 +51,14 @@ module.exports = {
             'Sets the gap (in plot fraction) between bars of',
             'the same location coordinate.'
         ].join(' ')
-    }
+    },
+    barcornerradius: {
+        valType: 'any',
+        dflt: 0,
+        editType: 'plot',
+        description: [
+            'Sets the rounding of corners. May be an integer number of pixels,',
+            'or a percentage of bar width(as a string).'
+        ].join(' ')
+    },
 };

src/traces/bar/layout_defaults.js

@@ -47,4 +47,5 @@ module.exports = function(layoutIn, layoutOut, fullData) {
 
     coerce('bargap', (shouldBeGapless && !gappedAnyway) ? 0 : 0.2);
     coerce('bargroupgap');
+    coerce('barcornerradius');
 };

src/traces/bar/plot.js

@@ -232,10 +232,51 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
                 y1 = fixpx(y1, y0, !isHorizontal);
             }
 
+            // Here is where bar is drawn
+            // TODO: Implement rounded corners here
+
+            function calcCornerRadius(radiusParam) {
+                var barWidth = isHorizontal ? Math.abs(y1 - y0) : Math.abs(x1 - x0);
+                if(!radiusParam) {
+                    return 0;
+                } else if(typeof radiusParam === "string") { // if it's a percentage string
+                    var rPercent = parseFloat(radiusParam.replace('%', ''));
+                    return barWidth * (rPercent / 100);
+                } else { // otherwise, it's a number
+                    return Math.min(
+                        radiusParam,
+                        barWidth/2,
+                    );
+                }
+            }
+            var r = calcCornerRadius(trace.marker.cornerradius || fullLayout.barcornerradius);
+            var bardir = isHorizontal ? Math.sign(x1 - x0) : Math.sign(y0 - y1);
+            var cornersweep = bardir >= 0 ? 1 : 0;
+
+            var path;
+            if(r && isHorizontal) {
+                path = 'M' + x0 + ',' + y0
+                    + 'V' + y1
+                    + 'H' + (x1 - r*bardir)
+                    + 'a ' + r + ',' + r + ' 0 0 '+cornersweep+' ' + r*bardir + ',' + r
+                    + 'V' + (y0 - r)
+                    + 'a ' + r + ',' + r + ' 0 0 '+cornersweep+' ' + -r*bardir + ',' + r
+                    + 'Z';
+            } else if(r) { 
+                path = 'M' + x0 + ',' + y0
+                    + 'V' + (y1 + r*bardir)
+                    + 'a ' + r + ',' + r + ' 0 0 '+cornersweep+' ' + r + ',' + -r*bardir
+                    + 'H' + (x1 - r)
+                    + 'a ' + r + ',' + r + ' 0 0 '+cornersweep+' ' + r + ',' + r*bardir
+                    + 'V' + y0 + 'Z';
+            } else {
+                path = 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z';
+            }
+
             var sel = transition(Lib.ensureSingle(bar, 'path'), fullLayout, opts, makeOnCompleteCallback);
             sel
                 .style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
-                .attr('d', (isNaN((x1 - x0) * (y1 - y0)) || (isBlank && gd._context.staticPlot)) ? 'M0,0Z' : 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
+                .attr('d', (isNaN((x1 - x0) * (y1 - y0)) || (isBlank && gd._context.staticPlot)) ? 'M0,0Z' : path)
                 .call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
 
             if(!fullLayout.uniformtext.mode && withTransition) {
@@ -350,6 +391,7 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCom
     if(textPosition === 'auto') {
         if(isOutmostBar) {
             // draw text using insideTextFont and check if it fits inside bar
+            // TODO: Need to consider `cornerradius` here
             textPosition = 'inside';
 
             font = Lib.ensureUniformFontSize(gd, insideTextFont);

src/traces/bar/style_defaults.js

@@ -24,6 +24,7 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, default
 
     coerce('marker.line.width');
     coerce('marker.opacity');
+    coerce('marker.cornerradius');
     coercePattern(coerce, 'marker.pattern', markerColor, hasMarkerColorscale);
     coerce('selected.marker.color');
     coerce('unselected.marker.color');

test/image/mocks/bar-rounded-corners.json

@@ -0,0 +1,32 @@
+{
+    "data": [
+        {
+            "x": [
+                "giraffes",
+                "orangutans",
+                "monkeys",
+                "capybaras"
+              ],
+              "y": [20, -14, 2, 18
+              ],
+              "type": "bar",
+              "marker": {"cornerradius": 10}
+          },
+          {
+            "y": [
+                "giraffes",
+                "orangutans",
+                "monkeys",
+                "capybaras"
+              ],
+              "x": [20, -4, -12, 18],
+              "type": "bar",
+              "orientation": "h",
+            "xaxis": "x2",
+            "yaxis": "y2"
+          }
+
+    ],
+    "layout": {"grid": {"rows": 1, "columns": 2, "pattern": "independent"}, "barcornerradius": "30%"}
+  }
+

test/plot-schema.json

@@ -14083,6 +14083,12 @@
       "editType": "none",
       "valType": "string"
      },
+     "cornerradius": {
+      "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+      "dflt": 0,
+      "editType": "plot",
+      "valType": "any"
+     },
      "editType": "calc",
      "line": {
       "autocolorscale": {
@@ -14770,6 +14776,12 @@
     "zoomScale"
    ],
    "layoutAttributes": {
+    "barcornerradius": {
+     "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+     "dflt": 0,
+     "editType": "plot",
+     "valType": "any"
+    },
     "bargap": {
      "description": "Sets the gap (in plot fraction) between bars of adjacent location coordinates.",
      "editType": "calc",
@@ -15632,6 +15644,12 @@
       "editType": "none",
       "valType": "string"
      },
+     "cornerradius": {
+      "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+      "dflt": 0,
+      "editType": "plot",
+      "valType": "any"
+     },
      "editType": "calc",
      "line": {
       "autocolorscale": {
@@ -26829,6 +26847,12 @@
       "editType": "none",
       "valType": "string"
      },
+     "cornerradius": {
+      "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+      "dflt": 0,
+      "editType": "plot",
+      "valType": "any"
+     },
      "editType": "calc",
      "line": {
       "autocolorscale": {
@@ -31439,6 +31463,12 @@
       "editType": "none",
       "valType": "string"
      },
+     "cornerradius": {
+      "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+      "dflt": 0,
+      "editType": "plot",
+      "valType": "any"
+     },
      "editType": "calc",
      "line": {
       "autocolorscale": {
@@ -32044,6 +32074,12 @@
     "showLegend"
    ],
    "layoutAttributes": {
+    "barcornerradius": {
+     "description": "Sets the rounding of corners. May be an integer number of pixels, or a percentage of bar width(as a string).",
+     "dflt": 0,
+     "editType": "plot",
+     "valType": "any"
+    },
     "bargap": {
      "description": "Sets the gap (in plot fraction) between bars of adjacent location coordinates.",
      "editType": "calc",