0
295
ViewsHighcharts: 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:
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?
1 answers
Answer question0
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