1

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?

Konstantink1
  • 575
  • 1
  • 8
  • 26
  • It seems to be applicable a solution with JQuery, however I was wondering whether it is possible to to implement it in React. Sorry I forgot to mention that in the question @pilchard – Konstantink1 Mar 31 '22 at 02:50
  • 1
    Hi @Konstantink1, This feature requires Highcharts core modification. Please check this example: http://jsfiddle.net/BlackLabel/vd2Ly9eh/ with the wrapped `translate` method for column series. – ppotaczek Mar 31 '22 at 08:21

1 Answers1

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

Konstantink1
  • 575
  • 1
  • 8
  • 26
  • 1
    Its good, but what if we have negative values as well, somehow we need to change the borderRadius top and bottom dinamically – rkris26 Mar 10 '23 at 13:36