Set border radius left/right for columnrange in Highcharts

Question

Is there a way to set border radius for left/right areas of a columnrange? I'm pretty close, but need a slight adjustment since I don't need a border radius for both sides, just one of each.

I'd like the two sides to meet like the first example, but have NO border radius on the ends they meet (so they match up nicely), instead of overlapping like the second part of that first example.

Here is the code:

http://jsfiddle.net/6qsvjark/600/

    series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 7,
            high: 8
        }, {
            x: 1,
            low: 6.5,
            high: 7.75
        }],
        borderRadius: 10,
        borderWidth: 0
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 8,
            high: 9
        }, {
            x: 1,
            low: 7.5,
            high: 8.5
        }],
        borderRadius: 10,
        borderWidth: 0
    }]

Answer 1

Custom plugin as mentioned by @Matias Cerrotta works only after it is modified to work with columnrange charts.

JS

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

        proceed.call(this);

        H.each(this.points, function(point) {
          if (options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) {
            const w = point.shapeArgs.width;
            const h = point.shapeArgs.height;
            const x = point.shapeArgs.x;
            const y = point.shapeArgs.y;

            let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w);
            let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w);
            let radiusBottomRight = H.relativeLength(options.borderRadiusBottomRight || 0, w);
            let radiusBottomLeft = H.relativeLength(options.borderRadiusBottomLeft || 0, w);

            const maxR = Math.min(w, h) / 2

            radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft;
            radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight;
            radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight;
            radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft;

            point.dlBox = point.shapeArgs;

            point.shapeType = 'path';
            point.shapeArgs = {
              d: [
                'M', x + radiusTopLeft, y + topMargin,
                'L', x + w - radiusTopRight, y + topMargin,
                'C', x + w - radiusTopRight / 2, y, x + w, y + radiusTopRight / 2, x + w, y + radiusTopRight,
                'L', x + w, y + h - radiusBottomRight,
                'C', x + w, y + h - radiusBottomRight / 2, x + w - radiusBottomRight / 2, y + h, x + w - radiusBottomRight, y + h + bottomMargin,
                'L', x + radiusBottomLeft, y + h + bottomMargin,
                'C', x + radiusBottomLeft / 2, y + h, x, y + h - radiusBottomLeft / 2, x, y + h - radiusBottomLeft,
                'L', x, y + radiusTopLeft,
                'C', x, y + radiusTopLeft / 2, x + radiusTopLeft / 2, y, x + radiusTopLeft, y,
                'Z'
              ]
            };
          }

        });
      });
    }(Highcharts));
  }));
  window.chart1 = new Highcharts.Chart({

    chart: {
      renderTo: 'container1',
      type: 'columnrange',
      inverted: true
    },

    title: {
      text: "Top Chart"
    },

    xAxis: {
      categories: ['Customer A', 'Customer B']
    },


    legend: {
      enabled: true
    },

    plotOptions: {
      columnrange: {
        grouping: false,


      }
    },

    series: [{
      name: 'Task 1',
      stack: 'Tasks',
      borderRadiusBottomLeft: 10,
      borderRadiusBottomRight: 10,
      data: [{
        x: 0,
        low: 7,
        high: 8
      }, {
        x: 1,
        low: 6.5,
        high: 7.75
      }],

    }, {
      name: 'Task 2',
      stack: 'Tasks',
      borderRadiusTopLeft: 10,
      borderRadiusTopRight: 10,
      data: [{
        x: 0,
        low: 8,
        high: 9
      }, {
        x: 1,
        low: 7.5,
        high: 8.5
      }],

    }]

  });

  window.chart2 = new Highcharts.Chart({

    chart: {
      renderTo: 'container2',
      type: 'columnrange',
      inverted: true
    },

    title: {
      text: "Bottom Chart"
    },

    xAxis: {
      categories: ['Customer A', 'Customer B']
    },


    legend: {
      enabled: true
    },

    series: [{
      name: 'Data',
      data: [{
        x: 0,
        low: 7,
        high: 8
      }, {
        x: 0,
        low: 8,
        high: 9,
        color: "#202020"
      }, {
        x: 1,
        low: 6.5,
        high: 7.5
      }, {
        x: 1,
        low: 7.5,
        high: 8.5,
        color: "#202020"
      }]
    }]

  });

});

Fiddle Demonstration