Highcharts: is it possible to set up top border radius for the columns in Column chart?

Question

I'm trying to set up a column chart that would look like this:

And I would like to make top border radius for columns rounded.

I found a solution that looks like this:

plotOptions: {
    series: {
        borderRadius: 8
    }
},

However the problem is that the border on bottom part of the columns is getting rounded this way as well:

And there's no way to pass a string to that borderRadius parameter with a several parameters for each corner., e.g. borderRadius: '5px 0'. Is it possible to set it up somehow?

Here's part of documentation that I've been referring to: documentation

NOTE: there's a solution for such problem here with use of JQuery, however I was wondering whether it is possible to set up in React?

Answer 1

I was actually able to modify it by using this plugin highcharts-border-radius. In the component with the column chart I added the following import:

const borderRadius = require('highcharts-border-radius');
borderRadius(Highcharts);

And in the config object that is being passed to HighchartsReact component as options prop I added the following:

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            borderRadiusTopLeft: 8,
            borderRadiusTopRight: 8
        }
    },

This setup worked for me