Stacked bar chart with borderRadius only rounds the last dataset

[arep]

Expected Behavior

All bars should be rounded on all edges.
Using borderRadius=500, and borderSkipped=false

On chartjs 3.1.0

Current Behavior

On Chartjs master only one dataset is rounded, the other have sharp edges.

Steps to Reproduce

https://jsfiddle.net/fdrt5y0u/1/

Environment

• Chart.js version: 3.3.0, 3.3.2 and master
• Browser name and version: Chrome
• Link to your project:

[LeeLenaleee]

It comes from this pull request, #8941

Most likely this behaviour was implemented because for most people this would be the desired behaviour that only the final bar has the border radius.

If you really want all bars to have border radius you can still specify the borderRadius as an object defining all corners and then you still have the old behaviour as stated in the docs: https://www.chartjs.org/docs/latest/charts/bar.html#borderradius

Fiddle: https://jsfiddle.net/Leelenaleee/b7j5uham/5/

[runekaagaard]

IMO thats super confusing default behaviour. When setting the borderRadius to a number you would expect that the borderRadius was that number :)

EDIT: Updating to latest chart.js fixed the problem for me. +1

[memmer57]

I would like to note, that you can put an array into borderRadius in order to represent each bar. This can be very helpful in many stacked bar charts for example, as I found there sometimes isn't another option with stacked bar charts.

For example:

borderRadius: [0, 12]

Or as an array of objects:

borderRadius: [
    { topLeft: 12, topRight: 12, bottomLeft: 12, bottomRight: 12 },
    { topLeft: 0, topRight: 0, bottomLeft: 12, bottomRight: 12 },
]

This is the only solution to a problem with my stacked bar chart I was able to find and it took me long time to realize, so I hope it helps someone.