Bar Chart - Format a bar to have rounded corners

[Ophir_Buchman]

When creating a bar chart, you might want to design it to have rounded corners

To round all corners - Apply the following widget script:

widget.on('processresult',function(widget,result) { 
  result.result.plotOptions.bar.borderRadius = 10;
});

Before	After

To round specific corners - Apply the following widget script:

(function (factory) {
  "use strict";
  if (typeof module === "object" && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (H) {
  var rel = H.relativeLength;
  H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
    var options = this.options,
    topMargin = options.topMargin || 0,
    bottomMargin = options.bottomMargin || 0;

    proceed.call(this);

    this.points.forEach(function (point) {
      var shapeArgs = point.shapeArgs,
      w = shapeArgs.width,
      h = shapeArgs.height,
      x = shapeArgs.x,
      y = shapeArgs.y;

      // Get the radius
      var rTopLeft = rel(options.borderRadiusTopLeft || 0, w),
      rTopRight = rel(options.borderRadiusTopRight || 0, w),
      rBottomRight = rel(options.borderRadiusBottomRight || 0, w),
      rBottomLeft = rel(options.borderRadiusBottomLeft || 0, w);

      if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
        var maxR = Math.min(w, h) / 2

        if (rTopLeft > maxR) {
          rTopLeft = maxR;
        }

        if (rTopRight > maxR) {
          rTopRight = maxR;
        }

        if (rBottomRight > maxR) {
          rBottomRight = maxR;
        }

        if (rBottomLeft > maxR) {
          rBottomLeft = maxR;
        }

        // Preserve the box for data labels
        point.dlBox = point.shapeArgs;
        point.shapeType = 'path';

        point.shapeArgs = {
          d: [
            ['M', x + rTopLeft, y + topMargin],
            ['L', x + w - rTopRight, y + topMargin],
            ['C', x + w - rTopRight / 2, y, x + w, y + rTopRight / 2, x + w, y + rTopRight],
            ['L', x + w, y + h - rBottomRight],
            ['C', x + w, y + h - rBottomRight / 2, x + w - rBottomRight / 2, y + h, x + w - rBottomRight, y + h + bottomMargin],
            ['L', x + rBottomLeft, y + h + bottomMargin],
            ['C', x + rBottomLeft / 2, y + h, x, y + h - rBottomLeft / 2, x, y + h - rBottomLeft],
            ['L', x, y + rTopLeft],
            ['C', x, y + rTopLeft / 2, x + rTopLeft / 2, y, x + rTopLeft, y],
            ['Z']
          ]
        };

        point.shapeArgs.d = point.shapeArgs.d.join(' ').replaceAll(',',' ');
      }
    });
  });
}));

widget.on('processresult',function(widget,result) { 
  result.result.series[0].borderRadiusTopLeft = '20%'
  result.result.series[0].borderRadiusTopRight = '20%'
});

Before	After

[steve]

Here's a simpler example of a widget script to do this.

It can also be used to set many other highcharts configuration options.

widget.on('beforeviewloaded', function(widget,element){
	
	var chartOptions = {	
		"plotOptions" : {
			"series" : {
				"borderRadius": 10,
				"groupPadding": 0.25
			}}
	};
	
	element.options = $.extend(true, element.options, chartOptions);
	
});