javascriptreactjshighchartsdata-visualizationcolumn-chart

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


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

column chart

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:

rounded column chart

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?


Solution

  • 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