How to make a rounded sharp edges in column chart

0
Hi Team,   How to make a rounded sharp edge in the column chart  like below image.      
asked
4 answers
3

According to plotly.com you can use barcornerradius to achieve this:

https://plotly.com/javascript/bar-charts/#rounded-corners-on-bars

 

The issue here is that this functionality was added to plotly.js version 2.29.0, reading the changelog:

https://github.com/plotly/plotly.js/blob/master/CHANGELOG.md#2290----2024-02-01

 

and the Charts widget (that is the column chart is a part of) uses plotly version "^2.27.1" based on Mendix GitHub repo: 

https://github.com/mendix/web-widgets/blob/main/packages/shared/charts/package.json

 

However, I tested it but it did not work. I'm not sure if there is any other way to do it.

answered
0

You could take a look at this plotly reference. I tried to implement the barcornerradius via the Custom Layout in the chard advanced settings and in the developer mode directly in the browser. Unfortunately not successful.

If you look at the javascript example, you can see how it should work (try it on Codepen).

So last step would be to figure out exactly how it can be implemented in Mendix. I will look for an older sample project to see it I can get it to work.

 

Hope this brings you closer to a solution.

answered
0

Hi Atul,

Please review the document Bar charts in JavaScript (plotly.com). I hope it will help you to find a solution. You can also explore some other features of the bar chart in that document, which will help in enhancing your chart.

answered
0

Hi Atul, 

I can't answer the question specifically (still trying to figure out how you have rounded ends on your bars) but in general, to have stylistic control over your charts it's best to use the AnyChart widget. I have a tutorial that explains it here. 

answered